Skip to content
Home » Web » jQuery » Load Page into jQuery Dialog

Load Page into jQuery Dialog

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:

    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src=""></script>
    <script src="js/jquery-local.js"></script>
    <button id='open-dialog'>
      Show Login Form
    <div id='dialog-form' title='Login'>

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.
    autoOpen : false,
    height : 300,
    width : 350,
    modal : true,

  //The second block of code.

  $("#open-dialog").click(function() {

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.

Leave a Reply

Your email address will not be published. Required fields are marked *