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

Prompt插件

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;}
 /*弹出层插件样式结束*/

这个样式在js里面调用css

这个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