Articles → JQUERY → Open web page in modal popup using jQuery

Open web page in modal popup using jQuery


Steps Involved

Step 1. Create an 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

<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