jQuery UI Dialog Example with Source Code Downloads
In this post we are going to take a look at the three jQuery UI dialog code examples I commonly use in my projects.
Live demos and code download button links were also provided below. Keep on reading!
Our jQuery, jQuery UI and jQuery UI theme are hosted by Google. You can choose your jQuery UI theme here.
jQuery UI Basic Modal
I love modals, or a "modal window" or "modal dialog", it is a child window that pops up in your application that requires a user interaction. It can display information, gives you choices or even contain an HTML form!
In jQuery UI, when you set modal: true parameter, it will be able to dim the background of your page when showing the dialog. If it is set to false, the background will remain as is.
This is useful when a client (like mine) did not like dimming the background. But I like dimming the background when showing a dialog, so in our code below, we'll set the modal to true.
basic-dialog.html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog Modal Example by codeofaninja.com</title>
<!-- include you jquery ui theme -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- you can have your own style -->
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: .8em;;
}
/* dialog div must be hidden */
#basicModal{
display:none;
}
</style>
</head>
<body>
<!-- sample content in your page -->
<div>You can click the button to show the basic jQuery UI dialog box.</div>
<input type='button' value='Show basic dialog!' id='showDialog' />
<!--
-this is the actual dialog, yes, it is included in your html body, it is just hidden
-you can set the dialog title via the 'title' tag
-->
<div id="basicModal" title="A message from codeofaninja.com">
Thank you for visiting codeofaninja.com!
</div>
<!-- include the jquery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- include the jquery ui library -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
// show the dialog on click of a button
$( "#showDialog" ).click(function(){
/* -select the div you want to be a dialog modal, in our case it is 'basicModal'
-you can add parameters such as width, height, title, etc. */
$( "#basicModal" ).dialog({
modal: true,
height: 300,
width: 400
});
});
</script>
</body>
</html>
jQuery UI Confirm Dialog
Instead of the old JavaScript confirm dialog box, I use jQuery UI. This is for a better user interface and to control the number of buttons and their labels, instead of just "ok" and "cancel".
confirm-dialog.html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Confirm Dialog Example by codeofaninja.com</title>
<!-- include you jquery ui theme -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- you can have your own style -->
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: .8em;;
}
/* dialog div must be hidden */
#basicModal{
display:none;
}
</style>
</head>
<body>
<!-- sample content in your page -->
<div>You can click the button to show the basic jQuery UI dialog box.</div>
<input type='button' value='Show confirm dialog!' id='showDialog' />
<!--
-this is the actual dialog, yes, it is included in your html body, it is just hidden
-we did not set the dialog 'title' here, we set it in the js parameter
-->
<div id="basicModal">
Go to codeofaninja.com?
</div>
<!-- include the jquery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- include the jquery ui library -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
// show the dialog on click of a button
$( "#showDialog" ).click(function(){
/* select the div you want to be a dialog, in our case it is 'basicModal'
you can add parameters such as width, height, title, etc. */
$( "#basicModal" ).dialog({
modal: true,
title: "Are you sure?",
buttons: {
"YES": function() {
window.open("https://codeofaninja.com/", '_blank');
},
"NO": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</body>
</html>
jQuery UI Load Content from URL
URL to be loaded must be in the same domain or subdomain name. If you really want to load from different domain, use iframes, example code here.
In this example, we will use sample_page.php as the file of URL to be loaded, it has the following contents:
<?php
echo "Here's the sample page loaded.<br /><br />";
echo "Only a page from the same domain/subdomain can be loaded using this technique.<br /><br />";
echo "If you really want to load a page from another domain/subdomain, use an iframe.<br /><br />";
echo "<a href='http://stackoverflow.com/a/14570255/903298' target='_blank'>Example code here</a>";
?>
Save the loaded URL content
Here's is the default behaviour of the jQuery UI dialog, it appends the URL content to the HTML body.
load-url-dialog.html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog Example by codeofaninja.com</title>
<!-- include you jquery ui theme -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- you can have your own style -->
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: .8em;;
}
/* dialog div must be hidden */
#basicModal{
display:none;
}
</style>
</head>
<body>
<!-- sample content in your page -->
<div>You can click the button to show the basic jQuery UI dialog box.</div>
<input type='button' value='Show basic dialog!' id='showDialog' />
<!--
-this time, we don't have the dialog html in the body, it is in another url
-we use the image loader to add some good effect when the system loads the url (after user click)
-->
<img src="images/ajax-loader.gif" id="imgLoader" style="display:none;" />
<!-- include the jquery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- include the jquery ui library -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
// show the dialog on click of a button
$( "#showDialog" ).click(function(){
/* here you can specify the url */
var url = "sample-page.php";
/* container of the content loaded from a url */
var tag = $("<div></div>");
console.log("url: " + url);
/* show the image loader */
$('#imgLoader').show();
$.ajax({
url: url,
success: function( data ) {
tag.html(data).dialog({
modal: true,
title: "Content is loaded from a URL!",
width: 600,
height: 450
}).dialog('open');
/* hide the image loader */
$('#imgLoader').hide();
console.log("success!");
}
});
});
</script>
</body>
</html>
To prove that the URL contents will be appended in the body of your HTML document, see the screenshot below, I used Google Chrome's inspect element to view this live source code of the current page.
Destroy or remove the loaded URL content
By default, the jQuery UI append the URL contents in your HTML body, if you want to prevent it, we can we add the close parameter on the dialog and use the jQuery remove() method.
load-url-destroy-dialog.html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog Example by codeofaninja.com</title>
<!-- include you jquery ui theme -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<!-- you can have your own style -->
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: .8em;;
}
/* dialog div must be hidden */
#basicModal{
display:none;
}
</style>
</head>
<body>
<!-- sample content in your page -->
<div>You can click the button to show the basic jQuery UI dialog box.</div>
<input type='button' value='Show basic dialog!' id='showDialog' />
<!--
-this time, we don't have the dialog html in the body, it is in another url
-we use the image loader to add some good effect when the system loads the url (after user click)
-->
<img src="images/ajax-loader.gif" id="imgLoader" style="display:none;" />
<!-- include the jquery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- include the jquery ui library -->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
// show the dialog on click of a button
$( "#showDialog" ).click(function(){
/* here you can specify the url */
var url = "sample-page.php";
/* container of the content loaded from a url */
var tag = $("<div></div>");
/* show the image loader */
$('#imgLoader').show();
$.ajax({
url: url,
success: function( data ) {
tag.html(data).dialog({
modal: true,
title: "Content is loaded from a URL!",
width: 600,
height: 450,
close: function(){
tag.dialog('destroy').remove()
}
}).dialog('open');
/* hide the image loader */
$('#imgLoader').hide();
console.log("success!");
}
});
});
</script>
</body>
</html>
To prove that the URL content did not append in the HTML body, see the screenshot of the live source code below.
Download Source Code
You can download all the code used in this tutorial for only $9.99 $5.55!
[purchase_link id="12411" text="Download Now" style="button" color="green"]
If you think of any other jQuery UI dialog example, please drop it in the comments section below, we'll try our best to add it in this post. Thanks!
Hi! I'm Mike Dalisay, the co-founder of codeofaninja.com, a site that helps you build web applications with PHP and JavaScript. Need support? Comment below or contact [email protected]
I'm also passionate about technology and enjoy sharing my experience and learnings online. Connect with me on LinkedIn, Twitter, Facebook, and Instagram.