jquery.prompt.js 弹窗的使用
生活随笔
收集整理的這篇文章主要介紹了
jquery.prompt.js 弹窗的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1 /***
2 * Prompt提示語插件
3 * 編寫時間：2013年4月8號
4 * version:Prompt.1.0.js
5 * author:小宇<i@windyland.com>
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插件
?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 /*彈出層插件樣式結束*/ 這個樣式在js里面調用css這個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
轉載于:https://www.cnblogs.com/yuqiandoudou/p/4439179.html
總結
以上是生活随笔為你收集整理的jquery.prompt.js 弹窗的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 股市 生活 工作
- 下一篇： 【IOS】获取wifi名称 （即SSID