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

最新推荐文章于 2023-12-07 23:08:16 发布

原创最新推荐文章于 2023-12-07 23:08:16 发布 · 1.2w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #popuplayer #弹出层 #说明

jquery组件应用专栏收录该内容

1 篇文章

订阅专栏

本文介绍了popup_layer插件的基本使用方法，包括如何引入必要的JavaScript文件、如何通过不同参数配置弹出层的行为特性等。提供了丰富的示例代码，如设置弹出层的位置偏移、实现渐入渐出特效及自定义特效等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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