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(),$(document).width()}); 39 } 40 }, 41 show:function(op){ 42 this.dialog.show(); 43 var ops = $.extend({},this.defaults,op); 44 this.content.css({ops.width}); 45 this.content.html(ops.content); 46 var Ds = { 47 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 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;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=" jscript;" id="tmp1">$.Prompt();</pre> 20 </div> 21 <div class="prompt_tmp"> 22 <a class="a" pid="tmp2">设置提示内容</a><br/> 23 <pre class=" jscript;" id="tmp2">$.Prompt("欢迎光临本站!");</pre> //class=" jscript;"只是把代码语法高亮的显示出来，与pre搭配使用 24 </div> 25 <div class="prompt_tmp"> 26 <a class="a" pid="tmp3">设置自动关闭时间为4s</a><br/> 27 <pre class=" 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=" 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=" 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