A common need in a web application is to open a separate window to display some information or get input. As most modern browsers have popup blockers, it is difficult to use window.open reliably, and it also detracts from the user experience.
A better solution is to have a modal dialog that pops up within the same page over the current content. You see this very commonly on sites, and it is extremely easy to achieve with jQuery UI, a library that adds rich UI elements to jQuery, such as dialog boxes, date and color pickers, buttons, sliders, and tabs.
The Dialog class is perfect for creating a modal window. You can also create non-modal dialogs as well. To use it, you need to include the jQuery UI script and css in addition to the base jQuery script:
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/jqueryui.js" type="text/javascript"></script> <link href="smoothness/jqueryui.css" rel="StyleSheet" type="text/css"/>
In this case I am using the Smoothness theme, one of the many themes available (you can also create your own themes).
I am going to create a simple modal dialog that has two buttons – a cancel button and a continue button. To start, I am going to create the div that will become the popup, along with a button to open it:
<div id="divDialog" title="A modal window"> This is a test </div> <input type="button" id="btnOpen" value="Open">
The first step is to call the dialog function in the document ready event to turn the div into a modal window. In this case we do not want it shown until the button is clicked, so it is created but not displayed. An event handler for the click event of the button is added as well.
$(document).ready(function(){
$("#divDialog").dialog({
resizable: true,
autoOpen:false,
modal: true,
width:400,
height:400,
buttons: {
'Continue': function() {
$(this).dialog('close');
alert('You clicked continue');
}, // end continue button
Cancel: function() {
$(this).dialog('close');
} //end cancel button
}//end buttons
});//end dialog
}); //end ready event
This creates the dialog with options, but does not yet display it. There two buttons defined with corresponding functions. They will be shown at the bottom of the window.
The last step is to add an event handler for the button to open the modal window:
$('#btnOpen').click(function(){
$('#divDialog').dialog('open');
}); //end click handler
The end result, after clicking the Open button, looks like this:
neat