You may already know how to operate jQuery dialog within a web page, but actually, you can load an external page or url into a dialog. Here are the steps that how I implement it:
In HTML section, you should:
- Import 2 jQuery API cdn: They are jQuery and jQuery UI.
- Import 1 jQuery UI CSS cdn: We choose "smoothness" for our theme in this example.
- Import 1 customized local jquery file.
- Add 1 listener element: I use a button to listen users' click and make the dialog opening.
- Add 1 empty <div> element: For containing the external page.
Here is the code snippet of HTML section:
<html>
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery-local.js"></script>
</head>
<body>
...
<button id='open-dialog'>
Show Login Form
</button>
<div id='dialog-form' title='Login'>
</div>
...
</body>
</html>
In local jQuery section, you should customize jquery codes in the file "js/jquery-local.js", you need two blocks of codes under "document" ready:
- The first block: To define and configure the div#dialog-form as a dialog.
- The second block: It's an event function which belongs to the button#open-dialog for listening users' clicks and loading external page to the right dialog.
Here is the code snippet of local jQuery section:
$(document).ready(function() {
...
//The first block of code.
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
});
//The second block of code.
$("#open-dialog").click(function() {
$("#dialog-form").load("login/login.php").dialog("open");
});
...
});
The key step is in the second block of codes (highlighted), which means the jQuery will load a page content before we open the dialog.
Since .load() is a simplified ajax function in essence, you can use .ajax() to customize more details instead.