How to Load Page Inside jQuery Dialog Box?

24 May , 2013  jQuery 

Load-Different-Page-Inside-jQuery-Dialog-BoxThis tutorial explains us how to load a html page inside jQuery dialog box or window using simple lines of jQuery lines and iframe tag.

jQuery dialog window is a famous jQuery pop up modal box known to many of us and is commonly used in web applications and web designing. There are lots of documentations available for the jQuery dialog box already in the jQuery website. We can always refer to them and customize the dialog box according to our needs. But, loading an external html page into this dialog box is something confusing to many as the documentation doesn’t clearly explains the same with an example. Today, I wanted to show you how to add an external page into the jQuery dialog box with some simple lines of jQuery codes. Check the demo on how to load page inside jQuery dialog box below:

DEMO | DOWNLOAD

Let’s see how the code looks like.

HTML:

jQuery/JavaScript:


CSS for jQuery Dialog UI:

Here we are calling all the default jQuery UI codes and CSS code from the jQuery website. However, you can specifically add or modify the CSS according to your needs of how the UI should appear.

Explanation:

In this code, we have only used all the predefined CSS & jQuery URLs for easy use of the demo.

In the HTML, we create a button using the button tag. We also add an iframe  inside an hidden div element. Initially, the div is hidden and later the div will be called using jQuery functions.

In the jQuery code, we initiate the dialog window only a click on the button using the button id #dialog_trigger. Once the button is clicked, we use the inbuilt dialog function of jQuery dialog UI as shown below:

We then set the property for the dialog window using the below function:

Which makes the dialog window not to auto open, position it at the center, the title is set to EDIT, dialog box is draggable, width and height is 800 and 700 respectively, the window is re-sizable and it is a modal window with overlay in the background.

DEMO | DOWNLOAD

Hope it is extremely easy to implement. Try implementing this method for your upcoming projects if any.



, ,

  • shiva

    hey awsome good work!
    your code helped me a lotttttttttttttttt!!

    reallly thanks !!!!!!!!!!!!!!!!!!!!!!!!!
    let ur website grow well!!!!!!!!!!!!!!!!!!!!

  • Can you please make your doubt clearer? 🙂

  • Bba

    Thanks for sharing the insight

  • so far so good except the problem i have is that the iframe content does not scroll and show the full contnets of the included URL

  • Sen

    I have been waiting long for a clear and simple working example,
    and this suites fully what I need, great thanks 🙂