Articles → JQUERY → Open Web Page In Modal Popup Using Jquery

Open Web Page In Modal Popup Using Jquery


  1. Basics of
  2. How to create a web application using Visual Studio?
  3. Basics about HTML controls like div.
  4. Basics about jQuery and jQuery UI.
  5. What are iframes?

Steps Involved

  1. Create an web application and include jQuery files in the header section
  2. Add anchor and a div tag
  3. Add iframe to div tag dynamically
  4. Output

Step 1. Create An Asp.Net Web Application And Include Jquery Files In The Header Section

<link rel="stylesheet" href=""><script type="text/javascript" src=""></script><script type="text/javascript" src=""></script>

Step 2. Add Anchor And A Div Tag

<a href="" onclick="return showDialog()">Show the Dialog</a><div id="divId" title="Dialog Title" />

Step 3. Add Iframe To Div Tag Dynamically

  1. Open div in a modal popup (by using dialog() method in jQuery’s ready function)
  2. Add iFrame programatically inside the div.
  3. <script type="text/javascript">
    function showDialog() {
    	$("#divId").html('<iframe id="modalIframeId" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" />').dialog("open");
    	$("#modalIframeId").attr("src", "About.aspx");
    	return false;
    $(document).ready(function() {
    		autoOpen: false,
    		modal: true,
    		height: 500,
    		width: 500

Step 4: Output

Picture showing the output of opening web page in modal popup using jQuery
Click to Enlarge

Posted By  -  Karan Gupta
Posted On  -  Monday, May 26, 2014


Your Email Id  
Query/FeedbackCharacters remaining 250