基于jquery的弹出层插件

测试页面需要引用jquery的js文件 插件文件jquery.Jwin.js

jquery.Jwin插件的使用参数都有详细说明，代码如下：

(function ($) {    

        var imgdir = 'images/';//图片文件夹路径

        var    autoHide=false;//悬浮div是否自动隐藏

        var    hideType='hide';//隐藏的方式 可选参数 hide、slide、fade    

        var    hideDelay=0;//悬浮div隐藏过程使用的时间

        var    hideTime=0;//悬浮div延迟隐藏时间

        var    zIndex=100;//多个div时获取焦点的div处于顶层

        var    showType='show';//悬浮div显示方式 可选参数 hide、slide、fade    

        var    showTime=0;//悬浮div显示过程使用的时间

        var    showDelay=0;//悬浮div延迟显示的时间

        //以下两个变量用于保证div被拖动后隐藏  再次打开后出现的位置仍然为首次出现的位置

        var oldTop='';//保存div初次出现的top

        var oldLeft='';//保存div初次出现的left  

    $.fn.extend({

            Jwin:function(option){

                var op=$.extend({

                    id:'',//悬浮div的id  （必须）

                    title: '',//标题

                    message:'',//显示信息

                    elementId:'',//显示元素的id

                    url: '',//显示的页面地址

                    width: 400,//悬浮div的宽度

                    height: 300,//悬浮div的高度

                    clickClose:false,//点击div之外的地方关闭div

                    //悬浮div显示参数

                    showType:'show',//悬浮div显示方式 可选参数 hide、slide、fade

                    showTime:0,//悬浮div显示过程使用的时间

                    showDelay:0,//悬浮div延迟显示的时间

                    //悬浮div隐藏参数

                    autoHide:false,//悬浮div是否自动隐藏

                    hideType:'hide',//隐藏的方式 可选参数 hide、slide、fade                    

                    hideTime:0,//悬浮div隐藏过程使用的时间

                    hideDelay:0,//悬浮div自动隐藏延迟时间            

                },option);

                                

                if(op.id==''){

                    alert("缺少WinId");

                    return;

                }

                

                autoHide = op.autoHide;

                hideType = op.hideType;

                hideDelay = op.hideDelay;

                hideTime = op.hideTime;

                showType = op.showType;

                showTime = op.showTime;

                showDelay = op.showDelay;

                zIndex = zIndex + 1;

                

                var winEle = $("#"+op.id);

                if(winEle.length == 0){

                    this.width = parseInt(op.width);

                    this.height = parseInt(op.height);

                    var banner=this.JwinCreatBanner(op.id,this.width,op.title);

                    oldTop = this.height >= document.documentElement.clientHeight ? 0 : (document.documentElement.clientHeight-this.height)/2;

                    oldLeft = this.width >= document.body.clientWidth ? 0 : (document.body.clientWidth-this.width)/2;

                    

                    //创建div元素

                    win=$('<div id="' + op.id + '"></div>');

                    win.css({'position':'absolute','top':oldTop,'left':oldLeft,'width':(this.width+2),'zIndex':(zIndex+1),'display':'none'});

                    win.html(banner);

                    win.find("#close").bind('click',function(){$(this).JwinClose(op.id);});

                    win.find("#bannerMiddle").bind('mousedown',function(){$(this).JwinMove(op.id);});

                    

                    //创建内容容器

                    var container=$('<div id="' + op.id + '_con"></div>');

                    container.css({'float':'left','width':+this.width,'height':this.height,'word-break':'break-all','overflow-x':'hidden','overflow-y':'auto','border':'1px solid #1972e1','background-color':'#FFF','clear':'both'});

                

                    if(op.message.length>0){

                        container.css('text-align','center');

                        container.append(op.message);

                    }

                    else if(op.url.length>0){

                        var iframe=$('<iframe frameborder="0"></iframe>');

                        iframe.css({'width':'100%','height':'100%','overflow':'visible','border':'0'});

                        iframe.attr('src',op.url);

                        container.append(iframe);

                    }

                    else if(op.elementId.length>0){

                        var element=$("#"+op.elementId);

                        if(element){                        

                            container.append(element);

                            element.show();

                        }

                    }

        

                    win.append(container);

                    $(document.body).append(win);                

                    this.JwinShow(win);                    

                    

                    //是否设点击页面隐藏div

                    if(op.clickClose){

                        setTimeout(function(){win.focus();},0);

                        win.bind('blur',function(){$(this).JclickHide(op.id)});    

                    }

                    

                    //是否设置自动关闭

                    if(autoHide){

                        this.JwinHide(win);

                    }

                }

                else{

                    winEle.css({'zIndex':(zIndex+1),'top':oldTop,'left':oldLeft});

                    this.JwinShow(winEle);

                    if(op.clickClose){

                        setTimeout(function(){win.focus();},0);

                        win.bind('blur',function(){$(this).JclickHide(op.id)});    

                    }

                }            

            },

            

            //创建标题

            JwinCreatBanner:function(winId,width,title){

                var bannerImddleWidth = width-47;//拖动部分div宽度为总宽度减去两边圆角宽度、关闭按钮宽度                

                var banner = '<div  style="folat:left;width:'+(width+2)+';clear:both;font-size:14px;font:Arial,Helvetica,sans-serif;color:#FFF;">';

                banner += '<div style="width:14px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner_left.gif) no-repeat;"></div>';

                banner += '<div id="bannerMiddle" style="width:'+bannerImddleWidth+'px;height:30px;float:left;line-height:30px;cursor:move;float:left;text-align:left;background:url('+imgdir+'windows_banner.gif)  repeat-x;" >'+title+'</div>';            

                banner += '<div  style="width:21px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner.gif)  repeat-x;"><img style="border:0;margin-top:4px;" id="close" src="'+imgdir+'win_close_normal.gif" onmouseover="this.src=\''+imgdir+'win_close_hover.gif\'"  onmouseout="this.src=\''+imgdir+'win_close_normal.gif\'" /></div>';

                banner += '<div style="width:14px;height:30px;line-height:30px;float:left;background:url('+imgdir+'windows_banner_right.gif) no-repeat;"></div>';

                banner += '</div>';

                return banner;

            },

            

            //拖动

            JwinMove:function(winId){

                var floatWin=document.getElementById(winId);

                zIndex=zIndex+1;

                floatWin.style.zIndex=zIndex;

                o=window.event.srcElement||window.event.target;

                var d=document;

                var a=window.event;

                var x=a.layerX?a.layerX:a.offsetX;

                var y=a.layerY?a.layerY:a.offsetY;

                if(o.setCapture){

                    o.setCapture();

                }

                else if(window.captureEvents){

                    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

                }

        

                d.onmousemove=function(a){                    

                    if(!a)a=window.event;

                    if(!a.pageX)a.pageX=a.clientX;

                    if(!a.pageY)a.pageY=a.clientY;

                    var tx=a.pageX-x,ty=a.pageY-y;

                    var maxx=document.documentElement.clientWidth-floatWin.clientWidth;

                    var maxy=document.documentElement.clientHeight-floatWin.clientHeight;

                    tx=(tx<0)?0:tx;

                    ty=(ty<0)?0:ty;

                    tx=(tx>maxx)?maxx:tx;

                    ty=(ty>maxy)?maxy:ty;                    

                    floatWin.style.left=tx;

                    floatWin.style.top=ty;                   

                };

        

                d.onmouseup=function(){

                    if(o.releaseCapture){

                        o.releaseCapture();

                    }

                    else if(window.captureEvents){

                        window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

                    }               

                    d.onmousemove=null;

                    d.onmouseup=null;

                };

            },

            

            //显示

            JwinShow:function(win){

                var t = showDelay;

                switch(showType){

                    case 'slide':

                    setTimeout(function(){win.slideDown(showTime);}, t);

                    break;

                    case 'fade':

                    setTimeout(function(){win.fadeIn(showTime);},t);

                    break;

                    default:

                    setTimeout(function(){win.show();},t);

                    break;

                }

            },

            

            //点击隐藏

            JclickHide:function(winId){                

                $(document).bind('click',function(){

                    var flag=true;

                    var ele=window.event.srcElement||event.target;

                    $(ele).parents().each(function(){

                            if($(this).attr("id")==winId){

                                    flag=false;

                            }

                    });    

                    if(flag){

                        $(this).JwinClose(winId);    

                    }    

                })        

            },

            

            //隐藏

            JwinHide:function(winId,atonce){

                var win = $("#"+winId);

                var t = atonce ? 0 : hideDelay;

                switch(hideType){

                    case 'slide':

                    setTimeout(function(){win.slideUp(hideTime);}, t);

                    break;

                    case 'fade':

                    setTimeout(function(){win.fadeOut(hideTime);},t);

                    break;

                    default:

                    setTimeout(function(){win.hide();},t);

                    break;

                }

                win.unbind('blur');

                $(document).unbind('click');

            },

            

            //关闭

            JwinClose:function(winId){

                this.JwinHide(winId,true);

            }

        });

})(jQuery)

页面调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script language="javascript" src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

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

<script language="javascript" type="text/javascript">

    $(document).ready(function(){

        /*$("#btn").Jwin({id:'myid',

        width:'600px',

            title:'我的标题',

            message:'sdfsdfsd',

            //autoHide:true,

            //elementId:'d1',

            //url:'test.html'

            //hideType:'hide',

            hideTime:500,

            hideDelay:'2000'

        });*/

        /*$('#btn1').Jwin({id:'myid1',

        width:'100px',

            title:'我的标题',

            message:'message',

            //autoHide:true,

            //elementId:'d1',

            //url:'test.html'

            hideType:'fade',

            hideTime:500,

            hideDelay:'2000',

            showType:'show',

            showTime:1000,

            showDelay:1000

        });*/

        //$(document).bind('click',function(){alert('ddd');});

    });

    

    function s(){

        $(this).Jwin({id:'myid1',

        width:'300px',

            title:'我的标题',

            message:'message',

            //autoHide:true,

            //elementId:'d1',

            //url:'test.html'

            hideType:'hide',

            hideTime:500,

            hideDelay:'2000',

            clickClose:true

            //showType:'show',

            //showTime:1000,

            //showDelay:1000

        });

        //$(document.body).bind('click',function(){alert('ddd');});

    }

    

    function s2(){

        $(this).Jwin({id:'myid2',

        width:'600px',

            title:'我的标题2',

        //message:'message2',

            //autoHide:true,

            //elementId:'d1',

            //url:'test.html'

            //hideType:'hide',

            url:'test.html',

            hideTime:500,

            hideDelay:'2000'//,

            //clickClose:true

        });

    }

    

</script>

</head>



<body>

<input type="button" id="btn1" value="show" onclick="s()" />

<input type="button" id="btn1" value="show" onclick="s2()" />



</body>

</html>