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 () {

        function showDialog(uniqueName) {
                autoOpen: false,
                resizable: true,
                height: 400,
                width: 600,
                modal: true

            return false;
In your page which will have the the control to open the modal, add this div.
    <div id='dialog-page' title="Modal">
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(;" ></asp:LinkButton>

New page inside the modal

Hope this helps.

Happy Coding.