How To Create jQuery Popup Windows With The dialog() Widget
Do you need to create a popup window or other floating dialog box using jQuery? The dialog() widget in the jQuery UI library makes it easy to create a popup, and to make it do what you want. In this post, we’ll tell you how to use dialog().
jQuery and JavaScript are very useful tools for web development and web-related programming – and you can choose from a broad selection of online courses in these and other subjects. They’re just a click away!
jQuery and jQuery UI
jQuery is a free, open-source code library that adds a variety of useful capabilities to JavaScript; jQuery UI is a library (also free and open-source) of user-interface elements for jQuery. To use jQuery and jQuery UI, you can either download the libraries and link to local copies, or link to publicly-available online instances:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
The basic syntax for using most jQuery commands looks like this:
$("select_something").do_something(arguments, functions,etc.);
In the examples shown here, we place most of the jQuery code inside a function used by the jQuery ready() method:
$(document).ready(function(){...});
This allows us to make sure that the code only runs when the page is fully loaded; in your own code, this may or may not be a useful precaution.
The dialog() Widget
The dialog() widget is part of the jQuery UI library. You use it just as you would a typical jQuery method; it would be the “do_something” part of the syntax example shown above.
Since dialog () is part of the UI library, you need to link to that library as well as to the main jQuery library:
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
The dialog() widget, like many of the jQuery UI elements, also needs to be linked to a theme, since it needs several of the graphic elements supplied by the theme to make it work. You can download themes from the official jQuery UI site or other locations and optionally modify them, or you can link to the default theme (“Smoothness”) and use it, as we do here:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
Let’s Make A Popup!
OK – it’s time to actually put the dialog() widget to work. The following code allows the user to open a popup dialog box, then close it:
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$( "#hello" ).dialog({ autoOpen: false });
$( "#say_it" ).click(function() {
$( "#hello" ).dialog( "open" );
});
});
</script>
</head>
<body>
<p>This page wants to say "Hello!"<br>
Be nice and press the button.</p>
<button id="say_it">Say "Hello!"</button>
<div id="hello" title="Hello World!"><p><font face="Georgia" size="4">
Hey, world, I just said "Hello!"</font></p></div>
</body>
</html>
When the user clicks on the “Say ‘Hello!'” button, a dialog box pops up (in the middle of the page) with the title “Hello World!” and the text “Hey, world, I just said ‘Hello!'” The user can click on the X in the upper right corner of the dialog box to close it.
What’s Poppin’?
We’ll start with the HTML. most of it is pretty obvious: We prompt the user with a paragraph of text, display a button with the ID “say_it”, and create a <div> element with the ID “hello”.
We use the <div> element to set some of the basic properties of the popup: its title, and the content that it will display. Note that the content is itself HTML; the popup can include most, if not all, of the elements that can be included in a standard browser window.
(Also note that the example begins with <!doctype html>. The jQuery UI library is rather picky; if you don’t include the doctype declaration, there’s a good chance that it won’t apply the theme to your dialog() widget.)
Opening A dialog()
And now for the dialog() widget itself. We actually refer to it twice: the first time is to tell it to not automatically open when the page is created:
$( "#hello" ).dialog({ autoOpen: false });
First, we select the <div> element containing the dialog box content by ID (“#hello”). Then we use the dialog() widget, much in the manner of a standard jQuery method, with the autoOpen option as an argument. It has two values: true sets the dialog box to open automatically when the page is initialized; false sets it to only open after the open() method is used. The default value is true, so you need to specify autoOpen:false if you don’t want it to pop up when the page is loaded.
We place the “open” operation inside the button’s click() method’s function, so we’ll only open the dialog box after the user clicks on the button:
$( "#say_it" ).click(function() {
$( "#hello" ).dialog( "open" );
});
Doing Something Interesting
Can we customize the popup window, and make it more interactive?
First, let’s change the text displayed in the various HTML elements (without changing anything functionally):
<p>Let's make the popup a little more interactive.</p> <button id="say_it">Try it now.</button> <div id="hello" title="Let's get interactive!"><p id="box_msg"><font face="Georgia" size="4">What's my browser type?</font></p></div>
Now, let’s add one line (broken up into several lines here for display) above the dialog(“open”) line:
$("#hello").dialog({width:500},{position: { my: "left top", at: "right+20 top", of: say_it }},
{ buttons: [ { text: "Get Browser Type", click: function() { $( "#box_msg" ).html("<p>
<font face='Georgia' size='4'>You're using a " + navigator.appName +
" browser.</font></p>"); } },
{ text: "Close", click: function() { $( this ).dialog( "close" ); } } ] });
That’s all we do; we don’t change anything else.
Now when you click on the button, a dialog pops up near the button. It has two buttons of its own; if you click on “Get Browser Type”, the dialog box tells you what kind of browser you have, and if you click on “Close”, it closes.
What’s Happening Here?
Basically, we loaded dialog() with a set of arguments to modify it and give it new functionality.
We set the width to 500 pixels:
{width:500}
We positioned the popup in relation to the button, using the standard jQuery UI positioning system:
{ position: { my: "left top", at: "right+20 top", of: say_it } }
And we added two buttons using the buttons option. The first button uses the jQuery html() method to replace the text in the popup, and in doing so, it uses the standard JavaScript navigator.appName property to determine your browser’s type:
{ text: "Get Browser Type", click: function() { $( "#box_msg" ).html("<p>
<font face='Georgia' size='4'>You're using a " + navigator.appName +
" browser.</font></p>"); } },
The second button simply closes the popup.
If you’re interested in web development, a good knowledge of jQuery and JavaScript are essential. There are online courses available in every aspect of web programming and design, including a may excellent jQuery and JavaScript courses. Check them out!
Recommended Articles
Featured course
Last Updated April 2022
A full project course with an emphasis on using jQuery to handle the game logic and page updates. | By Coding Academy
Explore CoursejQuery students also learn
Empower your team. Lead the industry.
Get a subscription to a library of online courses and digital learning tools for your organization with Udemy Business.