SharePoint Lightbox !

SharePoint Lightbox

I've been using light boxes within SharePoint for a couple of years now. If you've seen SharePoint 2010 Microsoft has decided to use them too. The older light boxes greybox and thickbox work well but aren't as attractive as newer versions and are no longer being supported. So, it was time to find a new script to use. First, I tried colorbox. Worked just fine in FF but not in IE. I then tried jQuery UI Dialog. I really wanted to use it for a couple of reasons. jQuery UI  has a number of other effects that are really nice and it looks like the product will be supported for the foreseeable future. I was able to get it to load pages in an iframe but it wasn't ideal. I'm going to revisit this one in the future. Then I found a product called SimpleModal . It is simple and modal and works in iframe so AJAX and postbacks work well.

Download Simple Modal and the x.png image 

SimpleModal

Upload the script and image to a document library

Create a new Webpart Page

Add a CEWP (Content Editor) Webpart to the page and add the following script 



<style type="text/css">

#simplemodal-container a.modalCloseImg {

    //This is the image you uploaded

    background:url('javascript/x.png') no-repeat;

    width:25px;

    height:29px;

    display:inline;

    z-index:3200;

    position:absolute;

    top:-15px;

    right:-18px;

    cursor:pointer;

}

#simplemodal-overlay {background-color:#000;}

#simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;}

</style>



//This is the jQuery library see jQuery Cross Site Lists for an explanation

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>



//This is the Simple Modal script you uploaded into a document library 

<script type="text/javascript" src="javascript/jquery.simplemodal-1.3.3.min.js"></script>





Add another CEWP Webpart to the page (under the first one) and add the following script

<script>

   function modalMe(){

       //You need to enter your own page here

       var src = "http://test/sites/test/LightBoxDemo/Lists/LightTasks/NewForm.aspx";

       $.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">');

   }

</script>



<input type="button" onclick="modalMe();" value="Open Modal Window" ></input>

Click the button and you should get something like this. If something goes wrong and you can't close the window just refresh the browser.