The aim of this example is to show you how to use popup windows with jQuery. jQuery provides a good plugin that can be used for this purpose.
A Popup window has a title and some content that may be a simple message or any HTML code (e.g. a login form etc.)
The jQuery dialog() method is used to show a popup. This method is called as $("selector").dialog() where the popup content will be the html that will be returned by a given selector.
The jQuery dialog() method shows a popup with the default settings where the default popup is draggable, resizable, modal-less etc. To change the popup settings we need to pass an object to this method.
Let’s look at some examples. To download the jQuery library, click here.
1. HTML
First of all you need to create a simple html document. The jQuery dialog() method resides inside the jquery ui library, so you need to also download that. To download the jQuery UI library, click here.
<!DOCTYPE html> <html> <head> <title>jQuery popup Example</title> <script src="jquery-2.1.4.min.js"></script> <script src="jquery-ui.min.js"></script> <link rel="stylesheet" href="smoothness/jquery-ui.min.css"> </head> <body> </body> </html>
2. jQuery popup examples
2.1 Simple popup with default setting example
In this example we will show a simple message. As mentioned earlier, the popup window has the default settings as resizable, modal-less and so on. The default popup setting will be used here. Notice that the title attribute of the div tag is used as the popup title.
Let’s add a simple div.
<!-- Example 1--> <div id="bookInfo" title="Book Info" style="display:none;"> <p>This book is written by Cem.</p> </div> <a href="javascript:return 0" onclick="openPoup()">Open Popup</a>
Calling the jQuery dialog() method is enough to show popup window .
<script type="text/javascript">
//Example 1
function openPoup() {
$("#bookInfo").dialog();
}
</script>
The result in the browser would be:
2.2 Popup Login Form example
Let’s create a login form.
<div id="dialog-form" title="Login" style="display:none;">
<form method="post">
Name : <br/>
<input type="text" name="name" id="name"><br/><br/>
Password : <br/>
<input type="password" name="password" id="password"><br/><br/>
<input type="submit" value="login">
</form>
</div>
<a href="javascript:return 0" onclick="login()">Login</a>
When the login popup window is active, we don’t want the user to be interactive with other elements in the HTML document. For that, the popup setting must be changed as in line 5. Line 6 makes the popup window unresizable.
<script type="text/javascript">
//Example 2
function login() {
var dialog = $( "#dialog-form" ).dialog({
modal: true,
resizable: false
});
}
</script>
The result in the browser would be:
2.2 Confirmation dialog example
A confirmation dialog is important in many cases, like when we want to ask the user if s/he is sure about an operation.
Let’s add the following simple html code.
<!-- Example 3--> <div id="email-sending-confirm" title="Email Sending" style="display:none;"> <p>Do you want to send this email ? </p> </div> <a href="javascript:return 0" onclick="confirm()">Send Email</a>
As you can notice in the following jQuery code, adding buttons to popup is very simple.
<script type="text/javascript">
//Example 3
function confirm() {
$( "#email-sending-confirm" ).dialog({
resizable: false,
modal: true,
width:400,
buttons: {
"YES,I want": function() {
//Send Ajax then close dialog
$( this ).dialog( "close" );
},
"No, Thanks": function() {
$( this ).dialog( "close" );
}
}
});
}
</script>
The result in the browser would be:
3.Conclusion
The popup window is commonly used in many cases as showing message, asking user for an operation’s confirmation or showing some forms as popup . jQuery provides a simple and powerful plugin to show popup windows. The jQuery dialog() method is used for that. The jQuery dialog() method is inside the jQuery UI library so we also need that besides jQuery core library.
4. Download
You can download the full source code of this example here : jquery popup window example
