jQuery jqModal Plugin to Display Embed Contents

I use jQuery jqModal to load external web page into a pop up window in my previous post. Actually we can also use jQuery jqModal plugin to load embed contents (i.e. web contents in the same page) into a pop up window. This can also make the web page with a very clean and simple design.

The following is an example:

Here’s the example of the above example:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>>Using jQuery jqModal to Display Embedd 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() {
          $('#embedContent1').jqm();
    });
</script>

</head>
<body>

<h3>jQuery jqModal Display Embed Content</h3>

The picture is very beautiful. <br /><br />
<a href="#">Click here to see the picture...</a>

<!-- Embed content below-->
<div id="embedContent1">
    <img src="nativity.png" width="300" height="284" />
    <hr>
    <a href="#">Close this window</a>
</div><!-- embedContent1 -->

</body>
</html>

The jQuery codes are very simple and easy to use, as shown below:

Using this jQuery jqModal plugin, the layout design of a web page can be very simple.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>