您的位置：首页 > Web前端 > JQuery

popup_layer jquery 弹出层使用，说明，详解

2016-02-23 09:43 555 查看

popup_layer的简单使用

需要引入的js :顺序不能乱

jquery-2.1.4.js

popup_layer.js

jquery_browse.js

其中 popup_layer.js 是主要插件

jquery_browse.js是自己写的对jQuery的扩展，因为popup_layer用到了$.browse而jquery1.9+版本都不支持了，所以为了兼容考虑得扩展下。

加载页面的时候，弹出层会自动隐藏。

弹出层弹出的时候默认会有z-index的很小，所以可以通过设置此属性来调整弹出的是否是在某一div的上层或者下层。

最后会有一个dome

以下是简单介绍：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS固定定位</title>

<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="popup_layer.js"></script>
<script type="text/javascript" src="jquery_browse.js"></script>

</head>
<script type="text/javascript">
//jquery 1.9+版本不支持 popup_layer 中的 $.browser
$(function(){

//3个参数 1 弹出触发的id(jquery选择器均可例如:input[name='aaa'])，点击事件。2 弹出层的id。3 关闭的id，点击事件

//一--基本
new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc" });

//2--可设置【弹出层位置偏移量】
//new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", offsets: { x: 102, y: 41} });

//3--弹出默认弹出层  【渐入渐出】特效
//new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", useFx: true });

//4--重载特效函数来完成自定义【特效】
/*
var t4 = new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", useFx: true });
t4.doEffects = function(way){
way == "open"?this.popupLayer.slideDown("slow"):this.popupLayer.slideUp("slow");
}
*/

//5--在弹出层容器上加上自定义的class   未测试
//new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", popupLayerClass: "t5" });

//6-useOverlay设置为true即可在弹出层后使用【遮罩】
//new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", useOverlay: true });

//7-- eventType为事件触发类型，表示以【何种方式触发弹出层】
//new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc", eventType: "mouseover" });

//8--【预定义】
/*
new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc",
onBeforeStart: function() {//此方法在页面加载时执行相当于onload
this.isDoPopup = false; //失效
setTimeout(function() { this.isDoPopup = true } .binding(this), 5000); //5秒之后弹出开始生效
}
});
*/

//9--示例9：综合效果
/*
var t9 = new PopupLayer({ trigger: "#abc", popupBlk: "#wl", closeBtn: "#btc",
useOverlay: true ,useFx:true,offsets:{x:0,y:-41}});
t9.doEffects = function(way){
if(way == "open"){
this.popupLayer.css({opacity:0.3}).show(400,function(){
this.popupLayer.animate(
{
left:($(document).width() - this.popupLayer.width())/2,
top:(document.documentElement.clientHeight - this.popupLayer.height())/2 + $(document).scrollTop(),
opacity:0.8
},
1000,
function(){this.popupLayer.css("opacity",1)}.binding(this)
);
}.binding(this));
}else{
this.popupLayer.animate(
{
left:this.trigger.offset().left,
top:this.trigger.offset().top,
opacity:0.1
},
{
duration:500,
complete:function(){
this.popupLayer.css("opacity",1);
this.popupLayer.hide()
}.binding(this)
}
);
}
}
*/

});

function clickMyself(_this){
_this.click();
}
</script>
<body>
<input type="text"  value="划过我" id="abc" name="abc" onmouseover="clickMyself(this)" />
<!--<input type="button"  value="测试点我" id="abc2" name="abc" />-->
<div  style="background:red  ;height:100px;width:100px;margin:6px;" id="wl">
<input type ="button" id="btc"  value ="关闭" onmouseover=""/>
<P> AAAAAAAAAAAA</P>
<P>BBBBBBBB</P>
</div>
</body>
</html>

demo:

jquery-popup_layer-test.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery popuplayer 弹出层说明

相关文章推荐

新的分享

章节导航