Showing posts with label Dialog box. Show all posts
Showing posts with label Dialog box. Show all posts

Monday, February 24, 2014

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.

Popular Posts