jQuery 弹出层插件(推荐)
最近在研究弹出层插件时发现网上很多插件功能很强大，同时插件也很庞大。在这里个人写了一个比较秀珍的弹出层插件。
jquery.popdialog.js
$(function(){
$.fn.PopDialog=function(options){
vardefaults={
Event:"click",//触发响应事件
title:"title",//弹出层的标题
type:"text",//弹出层类型(text、容器ID、URL、Iframe)
content:"content",//弹出层的内容(text文本、容器ID名称、URL地址、Iframe的地址)
width:500,//弹出层的宽度
height:400,//弹出层的高度
scrollTop:200,//层滑动的高度也就是弹出层时离顶部滑动的距离
isAuto:false,//是否自动弹出
time:2000,//设置自动弹出层时间，前提是isAuto=true
isClose:false,//是否自动关闭
timeOut:2000//设置自动关闭时间，前提是isClose=true
};
varoptions=$.extend(defaults,options);
$("body").prepend("<divid='floatBoxBg'></div><divid='floatBox'class='floatBox'><divclass='title'><h4></h4><spanid='closeDialog'>X</span></div><divclass='content'></div></div>");
var$this=$(this);//当然响应事件对象
var$blank=$("#floatBoxBg");//遮罩层对象
var$title=$("#floatBox.titleh4");//弹出层标题对象
var$content=$("#floatBox.content");//弹出层内容对象
var$dialog=$("#floatBox");//弹出层对象
var$close=$("#closeDialog");//关闭层按钮对象
varstc,st;
if($.browser.msie&&($.browser.version=="6.0")&&!$.support.style){//判断IE6
$blank.css({height:$(document).height(),width:$(document).width()});
}
$close.live("click",function(){
$blank.animate({opacity:"0"},"normal",function(){$(this).hide();});
$dialog.animate({top:($(document).scrollTop()-parseInt(options.height))+"px"},"normal",function(){$(this).hide();});
if(st){
clearTimeout(st);//清除定时器
}
if(stc){
clearTimeout(stc);//清除定时器
}
});
$content.css("height",parseInt(options.height)-70);
//文本框绑定事件
$this.live(options.Event,function(e){
$title.html(options.title);
switch(options.type){
case"url"://当类型是地址的时候
$content.ajaxStart(function(){
$(this).html("loading...");
});
$.get(options.content,function(html){
$content.html(html);
});
break;
case"text"://当类型是文本的时候
$content.html(options.content);
break;
case"id"://当类型是容器ID的时候
$content.html($("#"+options.content+"").html());
break;
case"iframe"://当类型是Iframe的时候
$content.html("<iframesrc=\""+options.content+"\"width=\"100%\"height=\""+(parseInt(options.height)-70)+"px"+"\"scrolling=\"auto\"frameborder=\"0\"marginheight=\"0\"marginwidth=\"0\"></iframe>");
break;
default://默认情况下的时候
$content.html(options.content);
break;
}
$blank.show();
$blank.animate({opacity:"0.5"},"normal");
$dialog.css({display:"block",left:(($(document).width())/2-(parseInt(options.width)/2))+"px",top:($(document).scrollTop()-parseInt(options.height))+"px",width:options.width,height:options.height});
$dialog.animate({top:options.scrollTop+"px"},"normal");
if(options.isClose){
stc=setTimeout(function(){
$close.trigger("click");
clearTimeout(stc);
},options.timeOut);
}
});
if(options.isAuto){
st=setTimeout(function(){
$this.trigger(options.Event);
clearTimeout(st);
},options.time);
}
}
});
配套的css：
*
{
padding:0;
margin:0;
}
#floatBoxBg
{
display:none;
width:100%;
height:100%;
background:#000;
position:fixed!important;/*ie7ff*/
position:absolute;
top:0;
left:0;
filter:alpha(opacity=0);
opacity:0;
}
.floatBox
{
border:#9CC95F5pxsolid;
position:fixed!important;/*ie7ff*/
position:absolute;
top:50px;
left:40%;
background:#fff;
display:none;
}
.floatBox.title
{
height:23px;
padding:7px10px0;
color:#fff;
background-attachment:scroll;
background:#9CC95F;
background-repeat:repeat-x;
background-position:0px0px;
}
.floatBox.titleh4
{
float:left;
padding:0;
margin:0;
font-size:14px;
line-height:16px;
}
.floatBox.titlespan
{
float:right;
cursor:pointer;
}
.floatBox.content
{
padding:20px15px;
background:#fff;
overflow-x:hidden;
overflow-y:auto;
}
#closeDialog
{
font-size:20px;
font-weight:bold;
color:#000;
margin-top:-5px;
}
#closeDialog:hover
{
font-size:20px;
font-weight:bold;
color:#fff;
margin-top:-5px;
}
最终的html示例：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript"src="../js/jquery-1.7.min.js"></script>
<scripttype="text/javascript"src="jquery.popdialog.js"></script>
<linktype="text/css"rel="stylesheet"href="popdialog.css"/>
</head>
<body>
<divid="test">弹出层插件测试</div>
<divid="detail"style="display:none;">
欢迎各位网友使用弹出层插件demo
</div>
<scripttype="text/javascript">
$(function(){
$("#test").PopDialog({
Event:"click",//触发响应事件
title:"弹出层插件",//弹出层的标题
type:"id",//弹出层类型(text、容器ID、URL、Iframe)
content:"detail",//弹出层的内容获取(text文本、容器ID名称、URL地址、Iframe的地址)
width:500,//弹出层的宽度
height:300,//弹出层的高度
scrollTop:200,//层滑动的高度也就是弹出层时离顶部滑动的距离
isAuto:true,//是否自动弹出
time:2000,//设置弹出层时间，前提是isAuto=true
isClose:false,//是否自动关闭
timeOut:5000//设置自动关闭时间，前提是isClose=true
});
});
</script>
</body>
</html>
以上所述是小编给大家介绍的jQuery弹出层插件(推荐)的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！