1 /***2 * Prompt提示语插件3 * 编写时间：2013年4月8号4 * version:Prompt.1.0.js5 * author:小宇<i@windyland.com>6 ***/
7 (function($){8 $.extend({9 PromptBox:{10 defaults : {11                     name  :    "T"+ newDate().getTime(),12                     content :"This is tips!",                            //弹出层的内容(text文本、容器ID名称、URL地址、Iframe的地址)
13                     width : 200,                                    //弹出层的宽度
14                     height : 70,15                     time:2000,//设置自动关闭时间，设置为0表示不自动关闭
16                     bg:true
17 },18 timer:{19                     stc:null,20                     clear:function(){21                         if(this.st)clearTimeout(this.st);22                         if(this.stc)clearTimeout(this.stc);23 }24 },25                 config:function(def){26                     this.defaults = $.extend(this.defaults,def);27 },28                 created:false,29                 create : function(op){30                     this.created=true;31                     var ops = $.extend({},this.defaults,op);32                     this.element = $("<div class='Prompt_floatBoxBg' id='fb"+ops.name+"'></div><div class='Prompt_floatBox' id='"+ops.name+"'><div class='content'></div></div>");33                     $("body").prepend(this.element);34                     this.blank = $("#fb"+ops.name);                        //遮罩层对象
35                     this.content = $("#"+ops.name+" .content");                //弹出层内容对象
36                     this.dialog = $("#"+ops.name+"");                        //弹出层对象
37                     if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {//判断IE6
38                         this.blank.css({height:$(document).height(),width:$(document).width()});39 }40 },41                 show:function(op){42                     this.dialog.show();43                     var ops = $.extend({},this.defaults,op);44                     this.content.css({width:ops.width});45                     this.content.html(ops.content);46                     var Ds ={47                                width:this.content.outerWidth(true),48                                height:this.content.outerHeight(true)49 };50                     if(ops.bg){51                         this.blank.show();52                         this.blank.animate({opacity:"0.5"},"normal");53                     }else{54                         this.blank.hide();55                         this.blank.css({opacity:"0"});56 }57                     this.dialog.css({58 width:Ds.width,59 height:Ds.height,60                                     left:(($(document).width())/2-(parseInt(Ds.width)/2)-5)+"px",61                                     top:(($(window).height()-parseInt(Ds.height))/2+$(document).scrollTop())+"px"
62 });63                     if ($.isNumeric(ops.time)&&ops.time>0){//自动关闭
64                         this.timer.clear();65                         this.timer.stc = setTimeout(function(){66                             var DB =$.PromptBox;67 DB.close();68 },ops.time);69 }70 },71                 close:function(){72                     var DB =$.PromptBox;73                         DB.blank.animate({opacity:"0.0"},74                                          "normal",75                                          function(){76 DB.blank.hide();77 DB.dialog.hide();78 });79 DB.timer.clear();80 }81 },82             Prompt:function(con,t,ops){83                 if(!$.PromptBox.created){$.PromptBox.create(ops);}84                 if($.isPlainObject(con)){85                     if(con.close){86 $.PromptBox.close();87                     }else{88 $.PromptBox.config(con);89 }90                     return true;91 }92                 ops =$.extend({},$.PromptBox.defaults,ops,{time:t});93                 ops.content = con||ops.content;94 $.PromptBox.show(ops);95 }96 })97 })(jQuery);

jquery.prompt.js是一款基于jQuery的插件，只要是设置弹出层的效果包括登陆等。

1 /*弹出层插件样式开始*/
2 .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;}3 .Prompt_floatBox{4 z-index:1000;5 display: block;6 position: absolute;7 padding:6px;8 text-align:center;9 top: 404.5px;10 left: 531.5px;11 height: auto;12 z-index: 10000;13 word-wrap: break-word;14 -webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 15px;15 box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 15px;16 border-top-left-radius: 6px;17 border-top-right-radius: 6px;18 border-bottom-right-radius: 6px;19 border-bottom-left-radius: 6px;20 background-color: white;21 opacity: 1;22 }23 .Prompt_floatBox .content{padding:10px;background:#fff;overflow-x:hidden;overflow-y: auto;}24 /*弹出层插件样式结束*/

这个CSS主要是通过弹框插件的js直接给通过加class的方式加上样式

演示代码：记得这个插件式依赖jquery的需要引入jquery.min.js文件

1 <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
2 <script type="text/javascript" src="js/jquery.prompt.min.js"></script>
3 <script type="text/javascript">
4 $(document).ready(function(){5     $("a[pid]").click(function(){6         var pid = $(this).attr("pid");7         eval($("#"+pid).html());8 });9 });10 </script>
11 </head>
12 <body>
13 <br />
14 <br />
15 <br />
16 <center>
17 <div class="prompt_tmp">
18     <a class="a" pid="tmp1">直接按默认打开</a><br/>
19     <pre class="brush: jscript;" id="tmp1">$.Prompt();</pre>
20 </div>
21 <div class="prompt_tmp">
22     <a class="a" pid="tmp2">设置提示内容</a><br/>
23     <pre class="brush: jscript;" id="tmp2">$.Prompt("欢迎光临本站!");</pre>  //class="brush: jscript;"只是把代码语法高亮的显示出来，与pre搭配使用
24 </div>
25 <div class="prompt_tmp">
26     <a class="a" pid="tmp3">设置自动关闭时间为4s</a><br/>
27     <pre class="brush: jscript;" id="tmp3">$.Prompt("欢迎光临本站!4S",4000);</pre>
28 </div>
29 <div class="prompt_tmp">
30     <a class="a" pid="tmp4">设置自动关闭时间为100s,然后在2s后强制关闭</a><br/>
31     <pre class="brush: jscript;" id="tmp4">
32 $.Prompt("欢迎光临本站!2S",100000);33 setTimeout(function(){34     $.Prompt({close:true});35 },2000);36     </pre>
37 </div>
38 <div class="prompt_tmp">
39     <a class="a" pid="tmp5">修改默认参数后，不带参数打开</a><br/>
40     <pre class="brush: jscript;" id="tmp5">
41 var def ={42     content:"欢迎来到jq-school!",43     time:1000
44 }45 $.Prompt(def);46 $.Prompt();47     </pre>
48 </div>

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

补充说明：当使用jQuery1.8.3以上版本时可能出现弹框弹不出来的问题

QQ：1689986723