How to Show and Hide a jQuery UI dialog popup

In this post we are going to load a specific page in a jquery UI dialog box. Below are the steps which does the trick.

Step 1: 

Add the jquery reference and then

Add the below empty div to your HTML

<div id="dlgdivcontent">

</div> 

Step2: 

Add the below java script function to your page

var $mydialog;

    function opendialogbox(url, popintitle) {

        $mydialog= $('#dlgdivcontent')

               .html('<iframe " src="' + url + '" width="500" height="350" scrolling="auto" frameBorder="0"></iframe>')

               .dialog({

                   autoOpen: false,

                   show: "fade",

                   hide: "fade",

                   modal: true,

                   height: 350,

                   width: 500,

                   resizable: false,

                   title: popintitle,

                   close: function (event, ui) {

                   //custom action if any on close click

                   }

               });

        $mydialog.dialog('open');

    }

Step3: 

Call the function opendialogbox with parameters as Url and Title on which wherever the link/button that you want to trigger the dialog box.

Hope this helps...

Related Post: How to Show and Hide a Modal Pop up Dialog in a SharePoint using Webpage
Related Post: Open and Close a SharePoint modal dialog with HTML structure