jquery.prompt.js 彈窗的使用

/***
 * Prompt提示語插件
 * 編寫時間：2013年4月8號
 * version:Prompt.1.0.js
 * author:小宇<[e-mail]>
***/
(function($){
        $.extend({
            PromptBox:{
                defaults : {
                    name  :    "T"+ new Date().getTime(),
                    content :"This is tips!",                            //彈出層的內容(text文本、容器ID名稱、URL地址、Iframe的地址)
                    width : 200,                                    //彈出層的寬度
                    height : 70,                            
                    time:2000,//設置自動關閉時間，設置為0表示不自動關閉
                    bg:true
                },
                timer:{
                    stc:null,
                    clear:function(){
                        if(this.st)clearTimeout(this.st);
                        if(this.stc)clearTimeout(this.stc);
                        }
                },
                config:function(def){
                    this.defaults = $.extend(this.defaults,def);
                },
                created:false,
                create : function(op){
                    this.created=true;
                    var ops = $.extend({},this.defaults,op);
                    this.element = $("<div class='Prompt_floatBoxBg' id='fb"+ops.name+"'></div><div class='Prompt_floatBox' id='"+ops.name+"'><div class='content'></div></div>");
                    $("body").prepend(this.element);
                    this.blank = $("#fb"+ops.name);                        //遮罩層對象
                    this.content = $("#"+ops.name+" .content");                //彈出層內容對象
                    this.dialog = $("#"+ops.name+"");                        //彈出層對象
                    if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {//判斷IE6
                        this.blank.css({height:$(document).height(),width:$(document).width()});
                    }
                },
                show:function(op){
                    this.dialog.show();
                    var ops = $.extend({},this.defaults,op);
                    this.content.css({width:ops.width});
                    this.content.html(ops.content);
                    var Ds = {
                               width:this.content.outerWidth(true),
                               height:this.content.outerHeight(true)
                               };
                    if(ops.bg){
                        this.blank.show();
                        this.blank.animate({opacity:"0.5"},"normal");        
                    }else{
                        this.blank.hide();
                        this.blank.css({opacity:"0"});
                    }
                    this.dialog.css({
                                    width:Ds.width,
                                    height:Ds.height,
                                    left:(($(document).width())/2-(parseInt(Ds.width)/2)-5)+"px",
                                    top:(($(window).height()-parseInt(Ds.height))/2+$(document).scrollTop())+"px"
                                    });
                    if ($.isNumeric(ops.time)&&ops.time>0){//自動關閉
                        this.timer.clear();
                        this.timer.stc = setTimeout(function (){            
                            var DB = $.PromptBox;
                            DB.close();
                        },ops.time);    
                    }
                },
                close:function(){
                    var DB = $.PromptBox;
                        DB.blank.animate({opacity:"0.0"},
                                         "normal",
                                         function(){
                                            DB.blank.hide();
                                            DB.dialog.hide();    
                                          });        
                        DB.timer.clear();
                }
            },
            Prompt:function(con,t,ops){
                if(!$.PromptBox.created){$.PromptBox.create(ops);}
                if($.isPlainObject(con)){
                    if(con.close){
                        $.PromptBox.close();
                    }else{
                        $.PromptBox.config(con);
                    }
                    return true;
                }
                ops = $.extend({},$.PromptBox.defaults,ops,{time:t});
                ops.content = con||ops.content;
                $.PromptBox.show(ops);
            }
        })       
})(jQuery);

 jquery.prompt.js是一款基於jQuery的插件，只要是設置彈出層的效果包括登陸等。

/*彈出層插件樣式開始*/
.Prompt_floatBoxBg{display:none;width:100%;height:100%;background:#000;position:fixed !important;/*ie7 ff*/position:absolute;top:0;left:0;filter:alpha(opacity=0);opacity:0; z-index:999;}
.Prompt_floatBox{
z-index:1000;
display: block;
position: absolute;
padding:6px;
text-align:center;
top: 404.5px;
left: 531.5px;
height: auto;
z-index: 10000;
word-wrap: break-word;
-webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 15px;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 15px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
background-color: white;
opacity: 1;
}
.Prompt_floatBox .content{padding:10px;background:#fff;overflow-x:hidden;overflow-y: auto;}
/*彈出層插件樣式結束*/

這個CSS主要是通過彈框插件的js直接給通過加class的方式加上樣式

演示代碼：記得這個插件式依賴jquery的需要引入jquery.min.js文件

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.prompt.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("a[pid]").click(function(){
        var pid = $(this).attr("pid");
        eval($("#"+pid).html());
    });
});
</script>
</head>
<body>
<br />
<br />
<br />
<center>
<div class="prompt_tmp">
    <a class="a" pid="tmp1">直接按默認打開</a><br/>
    <pre class="brush: jscript;" id="tmp1">$.Prompt();</pre>
</div>
<div class="prompt_tmp">
    <a class="a" pid="tmp2">設置提示內容</a><br/>
    <pre class="brush: jscript;" id="tmp2">$.Prompt("歡迎光臨本站!");</pre>  //class="brush: jscript;"只是把代碼語法高亮的顯示出來，與pre搭配使用
</div>
<div class="prompt_tmp">
    <a class="a" pid="tmp3">設置自動關閉時間為4s</a><br/>
    <pre class="brush: jscript;" id="tmp3">$.Prompt("歡迎光臨本站!4S",4000);</pre>
</div>
<div class="prompt_tmp">
    <a class="a" pid="tmp4">設置自動關閉時間為100s,然后在2s后強制關閉</a><br/>
    <pre class="brush: jscript;" id="tmp4">
$.Prompt("歡迎光臨本站!2S",100000);
setTimeout(function(){
    $.Prompt({close:true});
},2000);    
    </pre>
</div>
<div class="prompt_tmp">
    <a class="a" pid="tmp5">修改默認參數后，不帶參數打開</a><br/>
    <pre class="brush: jscript;" id="tmp5">
var def = {
    content:"歡迎來到jq-school!",
    time:1000
}
$.Prompt(def);
$.Prompt();
    </pre>
</div>

參考：jq-school.com/Detail.aspx?id=227

補充說明：當使用jQuery1.8.3以上版本時可能出現彈框彈不出來的問題

QQ：1689986723