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

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)