简单的弹窗

最新推荐文章于 2022-09-27 21:22:34 发布

JillYu

最新推荐文章于 2022-09-27 21:22:34 发布

阅读量592

点赞数

分类专栏：小组件文章标签：弹窗向下浮动的弹窗淡入淡出

本文链接：https://blog.csdn.net/Jill6693484/article/details/53288052

版权

小组件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

弹窗，各式各样，这里将常用的几种方式封装了一下，调用简单

上面是demo，喜欢的童学下面有下载地址噢～

使用说明

1、调用文件

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/pop-up_layer.js"></script>、
//基本样式，可修改美化
<link rel="stylesheet" type="text/css" href="css/pop-up_layer.css">

2、参数说明

参数	值＋说明
btnClass	若为需触发事件才调用弹窗，则参数为－触发事件的按钮的class；若为自发调用弹窗，则参数为－popUpAuto
elem	对应弹窗，其参数为弹窗的class
func	弹窗弹出方式，其参数（普通：popUp-common,淡入：popUp-fade,下移：popUp-up)

3、看栗子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pop-up</title>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/pop-up_layer.js"></script>
    <link rel="stylesheet" type="text/css" href="css/pop-up_layer.css">
</head>
<body>


<!--无触发事件弹窗-->
<div class="pop-up_layer popUp1">
    <div class="layer_main">
        <p class="layer_content">关注公众号，并点击关注可获得优惠券哦</p>
        <div class="pop-up-footer">
            <button class="btn_close">好</button>
        </div>
    </div>
</div>


<!--有触发事件弹窗-->
<!--注意：
触发事件按钮必须加上：data-popUp="name"
对应触发事件弹窗加上：data-popUp="name"
且name值相同对应
-->
<button class="attention-btn btn_click_up" data-popUp="btn1"type="button">关注</button>

<div class="pop-up_layer popUp" data-popUp="btn1">
    <div class="layer_main">
        <p class="layer_content">关注公众号，并点击关注可获得优惠券哦</p>
        <div class="pop-up-footer">
            <button class="btn_close">好</button>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        //调用弹窗
        /*必填三参数：
         1、触发事件按钮的class(如果不需要事件触发，第一个参数填popUpAuto)，
         2、弹窗外框class，
         3、弹窗弹出方式(普通：popUp-common,淡入：popUp-fade,下移：popUp-up)
         */
        //自发触发弹窗
        popUp("popUpAuto","popUp1","popUp-fade");

        //点击触发弹窗
        $(".btn_click_up").click(function(){
            popUp("btn_click_up","popUp","popUp-up");
        });

        //关闭弹窗
        $(".btn_close").click(function(){
            $(".pop-up_layer").fadeOut();
        });

    });

</script>
</body>
</html>