Sometimes it would be helpful to have a new window appear, like with a regular desktop application. HTML provides a very limited form for that, basically an alert box and an input box. However they are very limited in what you can do with them, such as, you cannot format the information inside those boxes.
jQuery UI provides a dialog method, which adds some interesting abilities to a standard div.
HTML Needs
jQuery UI will want to use a div that has everything inside of the dialog box you will create. Within the Div, you can create any element(s) you need.
You will need to add two attributes to your div. First, and ID which can be used to select the div with jQuery.
Additionally, you will want to use the title attribute to create a title for your new dialog window. This title will show as a title bar would in a regular desktop application.
JavaScript
Starting off easy, you can simply call the dialog method.
$('#dialog').dialog();
The default method will open the window for you automatically and give you a close button in the form of an “X” in the right side of the title bar.
Open Dialog on Command
Often you will want your dialog box to be initially hidden, and only open in response to something the user does. This could be when a user generates an error, clicks a button etc.
To have the dialog button initially closed, we will set the autoOpen property to false, and apply an open action to another event handler.
// define the initial dialog box and settings
$('#dialog').dialog({
autoOpen: false
});
// event handler for a button to open
$('#opener').click(function() {
$( "#dialog" ).dialog( "open" );
});
Animations
When the user clicks on the button/link, in the above example, the window will appear. You can also make it so the dialog button will animate in and out.
// define the initial dialog box and settings
$('#dialog').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 550
},
hide: {
effect: "slide",
duration: 1000
}
});
jQuery UI defines many effects for you to choose from. Simply enter their name into the effect value, and you have that effect.
Creating Modal Windows
A modal window in a desktop application is a window that takes control away from the other windows on your desktop, so you must focus on that window first. Since this is a webpage, we cannot wrestle away control from other applications. However, we can stop the user from focusing on other parts of the webpage by using the modal property.
When we use modal, it puts a gray overlay on top of the page, which keeps the user from interacting with other parts of the page, and makes it harder to see. This makes sure the attention of the user is on the window which sits on top of this overlay.
// define the initial dialog box and settings
// adding the modal property
$('#dialog').dialog({
autoOpen: false,
modal: true
});
Using modal is good when you want to display something extra important, however, you also want to make sure it is easy for the user to understand how to close the window. Some people will not think of the little “X” in the top right corner.
Incorporating Buttons
Clear and easy to use buttons are one way to make sure the user knows how to close a modal (or non modal) window on your page. You don’t have to use the button method, as jQuery UI will build that for you, all you have to do is specify them in your property object for your dialog.
// define the initial dialog box and settings
$('#dialog').dialog({
autoOpen: false,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( 'close' );
}
}
});
Notice that the button name is used simply as the variable, and the value acts as the click event handler. This way you can easily define what the button will state, and what it will do. Some values are predefined, like “Ok” and “Cancel”. So these do not need to be put into quotes. However, if you want to define a different value for your text box, you will need wrap quotes around the text for your button.
It is also worth noting that you can have more than one button on a form. For example and OK and Cancel button – with different event handlers.
jQuery UI – Using Dialog Boxes was originally found on Access 2 Learn
