移动端写弹窗组件，蒙版

最新推荐文章于 2024-05-09 15:49:59 发布

岁月如歌_

最新推荐文章于 2024-05-09 15:49:59 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/namechenfl/article/details/106287840

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
</body>
<script>
    function addMask() {
        if (document.getElementById("maskDiv")) {
            document.getElementById("maskDiv").style.display = 'block';
        } else {
            //蒙版
            var mask = document.createElement('div');
            mask.id = 'maskDiv';
            mask.style.width = window.innerWidth + 'px';
            mask.style.height = window.innerHeight + 'px';
            mask.style.background = 'rgba(0,0,0,0.3)'
            mask.style.position = 'fixed';
            mask.style.display = 'block';
            mask.style.left = 0 + 'px';
            mask.style.top = 0 + 'px';
            mask.style.zIndex = '999';
            document.body.appendChild(mask);

            //弹框部分
            document.getElementById("maskDiv").innerHTML =
                '<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />'
            mask.style.fontSize = '100px'
            mask.innerHTML =
                '<div style="-moz-user-select: none;-khtml-user-select: none;user-select: none;width:90%;height:9rem;border-radius: 0.45rem;text-align:center;position :absolute;top:0;bottom:0;left:0;right:0;margin:auto;font-size:1rem;"><span id="maskClose"  style="position: absolute;right:.5rem;top:-2rem;color: #3E0105;text-align: center;line-height: 24px;border-radius: 50px;width:24px;height:24px;background:#fff;cursor:pointer">&Chi;</span><a href="https://emcs.pa18.com/product/p_general/index.html?appType=01&key=12005200000000593030"> <img id="goDetail" style="width:100%;border-radius: 5px;" src="http://image.precare.cn/jintiebao.jpg" title="查看详情" alt="图片"></a></div>'
            //窗口变化
            window.onresize = function () {
                mask.style.width = window.innerWidth + 'px';
                mask.style.height = window.innerHeight + 'px';
            }
        }
        var maskClose = document.getElementById('maskClose')
        maskClose.onclick = function () {
            document.body.removeChild(mask);
        }
    }
        addMask()
</script>

</html>