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