弹出窗口插件

 

弹出透明遮罩窗口插件,兼容性强,界面友好!

调用:

<script type="text/javascript">    $("#sg").html("恭喜你!真好运!获得Iphone 4s一部!");    $('#dialog1').dialog('open');    </script>

Html:

<div class="popWin" id="dialog1">        <div class="popbox">            <h3><b>提示</b></h3>            <ul>                <li><span id="sg"></span></li>                <li class="button">                <input name="" type="button" value="确 定" class="closeWin"/>                               </li>            </ul>        </div>    </div>

js:/*弹出窗口插件*/   

(function($){    $.fn.dialog=function(flag,options){        var opts = $.extend({}, $.fn.dialog.options, options);        var popDiv = this;          if(flag=="close" && popDiv.is(":visible")){            if(popDiv.data("popWarp")){                popDiv.data("popWarp").remove();            }            popDiv.hide();            return;        }        var maxH = $(document).height()+"px";        var maxW = $(window).width()+"px";        var winX = ($(window).width()- popDiv.width())/2 + "px";        var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";        var popWarp=$("<div/>").addClass(opts.popWarp);        if(flag=="open" && popDiv.is(":hidden")){            popDiv.data("popWarp",popWarp);            popDiv.after(popWarp);            popWarp.css({width:maxW,height:maxH,left:"0px",top:"0px","z-index":opts.zindex});            popDiv.css({left:winX,top:winY,"z-index":(opts.zindex+1)});            popDiv.show();                }        $(window).resize(function(){            var maxH = $(document).height()+"px";            var maxW = $(window).width()+"px";            var winX = ($(window).width()- popDiv.width())/2 + "px";            var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";            popDiv.css({left:winX,top:winY});            popWarp.css({width:maxW,height:maxH,left:"0px",top:"0px"});        });        $(opts.closeWin).click(function(){            if(popDiv.data("popWarp")){                popDiv.data("popWarp").remove();            }            popDiv.hide();            try{            if (objfocus) {                objfocus.focus();            }            }catch (e){            }        });        //判断是否需要滚动;        var con={            scrol:function(kg){                if(kg!="off"){                    $(window).bind("scroll.popWin"+popDiv.attr("id"),function (){                            var offsetTop = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() +"px";                             popDiv.animate({top : offsetTop },{duration:380 , queue:false });                      });                }else{                    $(window).unbind("scroll.popWin"+popDiv.attr("id"));                }            }        };        con.scrol("");        return con;    };    $.fn.dialog.options={        closeWin:".closeWin",        popWarp:"popWarp",        zindex:999    };    $.fn.popWin=function(closeId,scrolls){        var popDiv = this;         var maxH = $(document).height()+"px";        var maxW = $(window).width()+"px";        var winX = ($(window).width()- popDiv.width())/2 + "px";        var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";        this.after("<div class='popWarp'></div>");        $(".popWarp").css({width:maxW,height:maxH,left:"0px",top:"0px"});        popDiv.css({left:winX,top:winY});        popDiv.show();        $(window).resize(function(){            var maxH = $(document).height()+"px";            var maxW = $(window).width()+"px";            var winX = ($(window).width()- popDiv.width())/2 + "px";            var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";            popDiv.css({left:winX,top:winY});            $(".popWarp").css({width:maxW,height:maxH,left:"0px",top:"0px"});        });        popDiv.find(closeId).click(function(){            $('#dialog1').dialog('close');            $(".popWarp").remove();            popDiv.hide();        });    //判断是否需要滚动;    if(scrolls){        var menuYloc = popDiv.offset().top;        $(window).scroll(function (){            var offsetTop = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() +"px";             popDiv.animate({top : offsetTop },{duration:380 , queue:false });          });    }    };        $.fn.fileLoad=function(flag,options){        var opts = $.extend({}, $.fn.dialog.options, options);        var popDiv = this;          if(flag=="close" && popDiv.is(":visible")){            if(popDiv.data("popWarp")){                popDiv.data("popWarp").remove();            }            var div = document.getElementById("fileLoad");            div.style.display = "none";            popDiv.hide();            $(".popWarp").hide();            return;        }        if(flag=="open"){            popDiv.show();        }        $(window).resize(function(){            var maxH = $(document).height()+"px";            var maxW = $(window).width()+"px";            var winX = ($(window).width()- popDiv.width())/2 + "px";            var winY = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() + "px";            popDiv.css({left:winX,top:winY});            popWarp.css({width:maxW,height:maxH,left:"0px",top:"0px"});        });        $(opts.closeWin).click(function(){            if(popDiv.data("popWarp")){                popDiv.data("popWarp").remove();            }            popDiv.hide();            try{            if (objfocus) {                objfocus.focus();            }            }catch (e){            }        });        //判断是否需要滚动;        var con={            scrol:function(kg){                if(kg!="off"){                    $(window).bind("scroll.popWin"+popDiv.attr("id"),function (){                            var offsetTop = ($(window).height()- popDiv.height())/2 + $(window).scrollTop() +"px";                             popDiv.animate({top : offsetTop },{duration:380 , queue:false });                      });                }else{                    $(window).unbind("scroll.popWin"+popDiv.attr("id"));                }            }        };        con.scrol("");        return con;    };    })(jQuery);

样式：
/*基本信息*/body{ font-family:"宋体"; font-size:12px; margin:0px; padding:0px; color:#333333;background:#fff;}div,ul,li,h1,h2,h3,h4,h5.h6,img,p,dl,dt,dd,ol,th,td{ margin:0px; padding:0px;}li{ list-style-type:none;}form,input,button,option,textarea,select{ margin:0px; padding:0px;}input,button,option,textarea,select{ font:100% Tahoma,Helvetica,Arial,sans-serif;}textarea{ resize: none;}a{ color:#333333; text-decoration:none;}a:link{ text-decoration:none;}a:visited{ text-decoration:none;}a:hover{ text-decoration:underline;}a:active{ text-decoration:none;}table{ font-size:inherit; font:100%;}th{ font-weight:bold;}img{ border:0px;}h3{ font-size:14px; color:#000;}h4{ font-size:12px;}.clear{ clear:both; height:0px; overflow:hidden;}.section{ width:100%; clear:both;}.column{ width:100%; clear:both; overflow:hidden;}.field{ width:100%; clear:both; overflow:hidden;}/* for Firefox 去除虚线框 */input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner{  border : 0px;}/* for IE8 去除虚线框 */input[type=submit]:focus, input[type=button]:focus{    outline : none;}/*弹出窗口全局样式*/.popWarp{background:#111;-moz-opacity: 0.5;opacity:0.5;filter: alpha(opacity=50);position:absolute;z-index:1200;}.popWin{display:none; width:415px; background:#E4E4E4; padding:5px; position:absolute; left:40%; top:20%; z-index:1280;}.popWin .popbox{ background:#fff; border:#C4C4C4 1px solid; padding:0 4px 13px 4px;}.popWin .popbox h3{ height:36px; border-bottom:#47B030 1px solid; font-size:14px; line-height:36px; padding:0 8px; color:#000;background: #fff;}.popWin .popbox h3 b{ float:left;}.popWin .popbox h3 span{ float:right; font-weight:100; cursor:pointer;}.popWin .popbox ul{ padding:44px 0 10px 67px;}.popWin .popbox ul li{ margin-bottom:16px;}.popWin .popbox ul li span{ line-height:25px; float:left; display:block;}.popWin .popbox ul li input{ width:151px; height:20px; border:#8E9BA3 1px solid; line-height:20px;}.popWin .popbox ul li.button{ padding:36px 15px 0 0;}.popWin .popbox ul li.button input{ width:78px; height:28px; background:#87BC48; border:#4D8B02 1px solid; float:right; color:#fff; font-size:14px; cursor:pointer; margin-right:15px;}