jquery.prompt.js 弹窗的使用

/***
 * Prompt提示语插件
 * 编写时间：2013年4月8号
 * version:Prompt.1.0.js
 * author:小宇<i@windyland.com>
***/
(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