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.