彈出窗口插件

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

調用:

    <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;}