jquery.prompt.js 弹窗的使用

技术分享
 1 /***
 2  * Prompt提示语插件
 3  * 编写时间:2013年4月8号
 4  * version:Prompt.1.0.js
 5  * author:小宇<[email protected]>
 6 ***/
 7 (function($){
 8         $.extend({
 9             PromptBox:{
10                 defaults : {
11                     name  :    "T"+ new Date().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);
Prompt插件

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。