jQuery overlay effect allow visitors to view contents from external pages without leaving the main page. This overlay effect is widely using on web pages. There are many jQuery plugins with overlay effect. Find a suitable one to suit your need shouldn’t be too difficult. Today I am going to discuss jQuery Flowplayer plugins that can produce overlay effect easily.

The jQuery overlay effect produced by FlowPlayer plugins is shown as the diagram below:

When visitors click on the link, the contents of the web pages will be shown in the pop up overlay window. Therefore the visitors will be kept on the same page.

Click here to view the example.

You can download jQuery Flowplayer plugins at:

http://flowplayer.org

Here’s the file of the above jQuery overlay effect:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Overlay with Flowplayer Plugins</title>

<script type="text/javascript" src="jquery-old.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-flowplayer/overlay-apple.css"/>
    
<!-- make all links with the 'rel' attribute open overlays -->
<script type="text/javascript">
    $(document).ready(function(){
        $(function() {
        
            // if the function argument is given to overlay,
            // it is assumed to be the onBeforeLoad event listener
            $("a[rel]").overlay({
        
                mask: 'grey',
                effect: 'apple',
        
                onBeforeLoad: function() {
        
                    // grab wrapper element inside content
                    var wrap = this.getOverlay().find(".contentWrap");
        
                    // load the page specified in the trigger
                    wrap.load(this.getTrigger().attr("href"));
                }
        
            });
        });
    });
</script>

</head>
<body>

<h3>jQuery Overlay with Flowplayer Plugins</h3>
<!-- external page is given in the href attribute (as it should be) -->
<a href="page1.html" rel="#overlay" style="text-decoration:none">Show jQuery Beginner Tutorial in Overlay</a>

<br /><br />

<!-- another link. uses the same overlay -->
<a href="page2.html" rel="#overlay" style="text-decoration:none">Show jQuery Hover Tutorial in Overlay</a>

<!-- overlayed element -->
<div id="overlay" class="apple_overlay">

    <!-- the external content is loaded inside this tag -->
    <div class="contentWrap"></div>

</div>

</body>
</html>

As you can see, the jQuery codes to produce an overlay window effect over a HTML page is rather simple.