An Easy SharePoint Lightbox Page

This is a followup to a previous post that can be found here SharePoint Lightbox. If you haven't looked it over, you should take a quick look. Anyway, a modal window is nice, but what we really need is a custom form to display in the lightbox. We don't want our users navigating around in the modal window and the oob forms weren't designed to be shown in modal windows. Here is what we're going to do, create a new page in SharePoint designer to insert a new item into a list. The new page will not include site navigation. The open buttons will preform as usual with validation and insert, but will close the lightbox when the new item has been saved. The cancel buttons will close the lightbox. Here is the final product.

Open the site in SharePoint Desinger


Expand the Lists folder and right click the list your interested in. Select New ASPX. 

The page will open. Select Insert on the command line -> SharePoint Controls -> Custom List Form

A popup form will display the lists in the web, select the list you want, the content type, the type of form and check Show standard toolbar. Click ok.

Rename the page if you would like, untitled.aspx isn't appealing to me.

Add the following script to the header section of the new page.

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

<script type="text/javascript">
$(document).ready(function(){

    $("input[id*='savebutton']").removeAttr('onclick');

    $("input[id*='savebutton']").click(function(){
        if (!PreSaveItem())
        { return false;    }
        var ctlName = $(this).attr('name');

        setTimeout(function(){
            WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(ctlName, "", true, "", "", false, true));
            setTimeout(function(){parent.$.modal.close();},1);
        },1);
    });


    $("input[id*='gobackbutton']").click(function(){
        parent.$.modal.close();
    });
});
</script>

Finally Add a Title for the new page

Select the first area of the page, the outlined box or the highlighted <td> tag. Replace that tag with this one.

 <td width="99%" nowrap=""><SharePoint:ListProperty Property="Title" runat="server"/></td>


That's it your done! This page is ready to be used in a 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.