Implementing J-Query Model Popup Plug-In and Playing FLV File in a Model Popup

• Download source code - 1.1 MB

Developing JQuery Model popup Plug In

As shown in the above screenshot, developing Model Popup will require 2 layers:

1. Disabled Background
2. Popup content Panel

We will implement a plug in and call it on Popup Panel element.

Somewhat like:

$("div.popupDiv").ShowPopup();

ShowPopup(); is a plug-in method which will initiate an instance of the plug-in which we are going to implement as the next step.

Prior to that, a CSS for Disabled background needs to be developed, which we can achieve as below:

.popupbackGround
{
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: #000;
	z-index: 1;
	opacity: 0.5;
	filter: alpha(opacity =50);
	display: none;
} 

We don’t have to assign this CSS class anywhere in HTML, but we will use this class while implementing Plug-In.

Next to this, we will implement Model Popup J-Query Plug-In.

Parameter to be passed in Plug-In: closeButtonCSS

The plug in will be called on the popup panel itself and take one parameter called CloseButtonCSS which will be used to close the Model popup.

We will create close event on the specified close button in parameter.

model-popup.js (Plug-In file)

jQuery.noConflict();
(
function($K){

$K.fn.ShowPopup=function(data)
    {
    /*
    Parameters: 
        closeButtonCSS,
        
    */
        $K(this).each(function(i)
            {
                var dbBack,intTopAxis=0;
                var objCloseButton= $K("." + data.closeButtonCSS);
                var objPopup= $K(this);                               
                var a;
                objCloseButton.click(function()
                    {
                        HidePopup();
                    });
                
                $K(window).scroll(function()
                {   
                    var xTop= parseInt($K(window).scrollTop()) + intTopAxis ;
                    objPopup.animate({top:xTop+ "px"},{queue: false, duration: 350});
                });
                
                initBackGround = function()
                {                   
                    dbBack = $K("<div></div>").attr
                    ("class","popupbackGround").css
                    ("height",$K(document).height()).hide();
                    $K("body").append(dbBack);
                    intTopAxis= parseInt(($K(window).height())/2)-(objPopup.height()/2);
                }
                ShowPopup = function()
                {
                    initBackGround();
                    dbBack.fadeIn(function(){objPopup.show();});
                    objPopup.css({"left":(($K(window).width())/2)-
                    (objPopup.width()/2),"top":(($K(window).height())/2)-
                    (objPopup.height()/2)+parseInt($K(window).scrollTop())});
                }
                HidePopup = function()
                {
                    objPopup.fadeOut();
                    dbBack.fadeOut();
                }
                ShowPopup();            
            });
    }

})(jQuery);

How to Call Model Popup

Popup Plug-In can be called on any Div object. And the DIV itself will get displayed as a popup as shown in the above screen.

For example: Target popup DIV class is popupDiv

<div class="popupDiv">
        <div>
            Content Goes here...
        </div>
        <div class="close">
            <a class="lnkClose">
            <img src="resource/small-closelabel.gif" /></a></div>
    </div>

We can popup by placing the following JavaScript:

$k("div.popupDiv").ShowPopup(
{
    closeButtonCSS:"lnkClose"
}); 

Here ”closeButtonCSS:"lnkClose" is used to treat lnkClose as close button of popup.

Playing FLV File

To play any FLV file in HTML will require a flash based FLV player. There are many FLV players available, among those, we will use one, which is a flash file and we can play FVL using the flash FLV player.

Here we will require 2 flash (SWF) files:

1. flvplayer.swf (download here)
2. SteelExternalAll.swf (needs to be placed on the same path of container HTML page) (Download here)

Below is how to embed object in HTML page to play FLV using the above FLV player.

<object id="Object1" height="380" 
width="400" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://macromedia.com/cabs/swflash.cab#version=6,0,0,0">
    <param name="movie" value="flash/flvplayer.swf" />
    <param name="FlashVars" value="flvurl=../flash/test.flv" />
    <param name="quality" value="high" />
    <param value="true" name="autoplay" />
    <embed height="380" width="400" 
    src="flash/flvplayer.swf" flashvars="flvurl=../flash/test.flv"
    type="application/x-shockwave-flash" />
    </object>

The above code will take FLV file path as a parameter, that is been specified at 2 places.

1. flashvars="flvurl=../flash/test.flv"
2. <param name="movie" value="flash/flvplayer.swf" />

Your FLV file path will go here.

Putting It All Together

Now we got both things ready with us.

1. Implemented J-Query plug-In for model popup
2. FLV player

Simply placing the object tag inside the Popup Div will result in our targeted output.

In addition to that, we will require a Button to be clicked to show model popup. Like shown below:

<a class="lnkPopup">Play FLV in Popup</a> 

Let’s create a simple J-Query click event of the above link and call popup plug-in inside click event, as shown below:

<script type="text/javascript" language="javascript">
    var $k=jQuery.noConflict();
    $k(document).ready(function()
        {
        $k("a.lnkPopup").click(function()
            {
               $k("div.popupDiv").ShowPopup(
                {
                    closeButtonCSS:"lnkClose"
                });
            });
        });
</script>

You can also download the full source code ZIP file here.

Visit my blog.