/***
* 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