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

Open Web Page In Modal Popup Using Jquery

Prerequisite

1. Basics of asp.net.
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 asp.net 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="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"><script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script><script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></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.

<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() {
	$("#divId").dialog({
		autoOpen: false,
		modal: true,
		height: 500,
		width: 500
	});
}); 
    </script>

Step 4: Output