简单封装一个下弹框

2024-03-09 13:39:59

移动端滚动穿透问题，让body/html不滚动不就行了，让里面一个容器内容超出就滚动

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./normalize.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            font-weight: 400;
            font-size: 20px;
        }

        html {
            height: 100%;
        }

        body {
            position: relative;
            height: 100%;
        }

        .container {
            height: 100%;
            overflow: auto;
        }

        .x_btn {
            width: 200px;
            height: 40px;
        }

        .x_layer {
            display: none;
            position: absolute;
            top: 0%;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: .2;
        }

        .x_popup {
            overflow: hidden;
            display: none;
            position: absolute;
            z-index: 1000;
            width: 100%;
            height: 0;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            background-color: #fff;
            padding: 0 20px;
            box-sizing: border-box;
        }

        @keyframes pop {
            100% {
                display: block;
                height: 260px;
            }
        }

        .popupActive {
            display: block;
            bottom: 0;
            animation: pop cubic-bezier(0.175, 0.885, 0.32, 1.275) .6s forwards;
        }

        .x_cancel {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 5%;
            right: 5%
        }

        .x_tips {
            text-align: center;
            border-bottom: 1px solid #ddd;
            height: 40px;
            line-height: 40px;
        }

        .x_content {
            width: 100%;
            height: 50%;
            padding: 20px 0;
            line-height: 30px;
            overflow: auto;
        }

        .box1,
        .box2 {
            height: 200px;
        }

        .box1 {
            background-color: pink;
        }

        .box2 {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box1"></div>
        <button class="x_btn">弹出</button>
        <div class="box2"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box1"></div>
    </div>
    <script src="./fastclick.js"></script>
    <script src="./popup.js"></script>
    <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function () {
                FastClick.attach(document.body);
            }, false);
        }
        
        var options = {
            title: '题目提示',
            /* 支持iconfont字体图标,类名引入 */
            cancel: '',
            content: '我亦好歌亦好酒，唱与佳人饮与友。歌宜关西铜绰板，酒当直进十八斗。  摇摆长街笑流云，我本长安羁旅人。丛楼参差迷归路，行者匆匆谁与群。  幸有作文与谈诗，寥落情怀有君知。负气登楼狂步韵，每被游人笑双痴。  幸有浩然共蹴鞠，轻拨慢扣自欢娱。七月流火无眠夜，同向荧屏做唏嘘。  幸有彩云喜香山，兰裳桂冠共游仙，说来红尘多趣事，笑声惊动九重天。  幸有晓艳能操琴，玉葱手指石榴裙。止如高山流如水，流水溯洄桃花林。  红衣佳人白衣友，朝与同歌暮同酒。世人谓我恋长安，其实只恋长安某。'
        }

        X_popup(options)

    </script>
</body>

</html>

popup.js

/**
 * author: Mr Lee (James)
 * Date: 2020-8-16 16:30
 * description: a tool and seal for popup
 * version: 1.0
 * site: https://www.cnblogs.com/Mr-O-o-Lee/
 * @param {Object} obj 配置对象
 * @param {String} obj.title 弹框head文字
 * @param {String} obj.cancel 弹框右边x
 * @param {String} obj.content 提示内容
 * @param {String} clsname dom操作对象的类名
 * 说明：需要一个.container的容器，并且body高度100%,触发弹框的元素需要添加x_btn类名
 */

var X_popup = (function () {
    /* 初始化结构 */
    initStructure()
    /* 简单封装getElementsByClassName()[0]，简化代码 */
    X_GetEleByClass

    return function (obj) {
        X_GetEleByClass('x_popup').children[0].innerText = 'X'
        /* 添加iconfont字体图标,类名引入 */
        obj.cancel && X_GetEleByClass('x_popup').children[0].classList.add(obj.cancel)
        /* 使用innerHTML可能会遭到xss攻击 */
        X_GetEleByClass('x_popup').children[1].innerText = obj.title
        X_GetEleByClass('x_popup').children[2].innerText = obj.content
    }
})()

function X_GetEleByClass(clsname) {
    /* document.querySelector不能及时获取最新DOM */
    return document.getElementsByClassName(clsname)[0]
}

function initStructure() {
    var structure = `<div class="x_layer"></div>
                     <div class="x_popup">
                        <i class="x_cancel"></i>
                        <h2 class="x_tips"></h2>
                        <p class="x_content"></p>
                    </div>`

    var container = document.querySelector('.container')

    container.insertAdjacentHTML('beforeend', structure)

    X_GetEleByClass('x_btn').addEventListener('touchstart', handlePopup)
    /* document.querySelector不能及时获取最新DOM来绑定事件 */
    X_GetEleByClass('x_cancel').addEventListener('touchstart', handleCancel)

    function handlePopup() {
        X_GetEleByClass('x_layer').style.display = 'block'
        X_GetEleByClass('x_popup').classList.add('popupActive')
    }

    function handleCancel() {
        X_GetEleByClass('x_layer').style.display = 'none'
        X_GetEleByClass('x_popup').classList.remove('popupActive')
    }
}

码农公寓

代码如下

popup.js

相关文章