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實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)