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

Open web page in modal popup using jQuery






Prerequisite





















Steps Involved













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








<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





Click to Enlarge


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

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250