Wednesday, August 15, 2012

jQuery - Open another page inside the modal window

Sometimes you might face a situation where you want to open another page inside your modal window. This is how you can achieve it.

Add this part to your master page.
    <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {
            $("#dialog-page").dialog("destroy");
        });

        function showDialog(uniqueName) {
            $("#dialog-page").load('../NewPage.aspx').dialog({
                autoOpen: false,
                resizable: true,
                height: 400,
                width: 600,
                modal: true
            });

            $('#dialog-page').dialog('open');
            return false;
        }
    </script>
In your page which will have the the control to open the modal, add this div.
    <div id='dialog-page' title="Modal">
        
    </div>
I am using Link Button to open the modal. This is how you can trigger the javascript function.
<asp:LinkButton ID = "lbtnModal" runat="server" Text="Open" OnClientClick="javascript:return showDialog(this.name);" ></asp:LinkButton>

New page inside the modal

Hope this helps.

Happy Coding.

Regards,
Jaliya

7 comments:

  1. Not working not a good tutorial. Without testing it has been posted

    ReplyDelete
  2. it works, ensure u include jqueryui library

    ReplyDelete
  3. its working ........ thanks........
    inside script block
    $(function () {
    $("#dialog-page").dialog("destroy");
    });

    is this code necessary ? without this the whole code is running perfectly....

    ReplyDelete
    Replies
    1. I believe that line is used for destroying a previous dialog, in case it exists. Here's a link to the api on Destroy method: http://api.jqueryui.com/dialog/#method-destroy

      Delete
  4. Can i use asp file upload inside the modal

    ReplyDelete
  5. It is not calling the page load event of the child page each time.

    ReplyDelete