In previous jQuery post, I made a simple slide down menu to display an external web page content. Today I am going to discuss how to make a jquery pop up window to display an external web page content.

The following is an example of jquery pop up window.

The pop up window effect is achieved by using jQuery jqModal plugin. This can save a lot of time by writing our own codes. You can download jQuery jqModal plugin at:

http://dev.iceburg.net/jquery/jqModal/

Here’s the file of the above example:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using jQuery jqModal to Display External Webpage Content</title>
<link type="text/css" rel="stylesheet" media="all" href="jqModal.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqModal.js"></script>

<script type="text/javascript">
    $("document").ready(function() {
          $('#ex2').jqm({ajax: 'example-1-1.html', trigger: 'a.ex2trigger'});
    });
</script>

</head>
<body>
<h3>jQuery jqModal Display External Webpage Content</h3>

<a href="#" class="ex2trigger">Click here to view example</a>

<div id="ex2" class="jqmWindow">
    Please wait... <img src="waiting_progress_bar.gif" alt="loading" />
</div>

</body>
</html>

The codes are very clean and simple.

Therefore this is easy to load an external web page into a pop up window with jQuery jqModal plugin.