仅居中的弹窗

最新推荐文章于 2022-10-14 00:51:01 发布

斗弟

最新推荐文章于 2022-10-14 00:51:01 发布

阅读量234

点赞数

分类专栏：原生插件文章标签：居中的弹窗

本文链接：https://blog.csdn.net/L_Lintellect/article/details/99752571

版权

原生插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用前必读：

居中窗口弹出插件

插件功能：
*动态居中的弹窗
*左上角有关闭按钮
*Esc可退出
参数说明： popupWindow(‘btn’, { ‘width’: ‘300’, ‘height’: ‘300’ });
*btn: id 名
*{ ‘width’: ‘300’ , ‘height’: ‘300’}，弹出的窗口的尺寸，不写时，默认值为：auto

使用步骤：
第一步：复制html结构，

部分。需要加入内容直接在里面写。
第二步：复制样式。
第三步：引入js，确定参数，调用即可。

html

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

<head>
    <meta charset="UTF-8">
    <title>仅居中弹窗插件</title>
    <style>
        * {margin: 0;padding: 0; }
        #popBox {display: none;border: 1px solid #ccc;position: fixed;}
        #popClose {width: 30px;height: 30px;line-height: 30px;text-align: center;background: red;position: absolute;right: -1px;top: -1px;cursor: pointer;
        }
    </style>
</head>
<body>
    <p class="aa">
        <a href="###" id="btn">点我出弹窗</a>
    </p>
    <!-- 登录弹窗 -->
    <div id="popBox">
        <p id="popClose">&times;</p>
    </div>
</body>
<script src="justPopup.js"></script>
<script>
    popupWindow('btn', { 'width': '300', 'height': '300' });
</script>
</html>

justPopup.js

function popupWindow(popBoxId, obj) {
    //默认参数
    let defaultData = {
        width: 'auto',
        height: 'auto' //高度如果做限制则自适应
    }
    Object.assign(defaultData, obj);//用默认参数 ,选填
    //传入的参数
    let btn = document.getElementById(popBoxId);//触发弹窗的节点
    let popBox = document.getElementById('popBox');
    let popClose = document.getElementById('popClose');
    popBox.style.width = defaultData.width + 'px';
    popBox.style.height = defaultData.height + 'px';
    //1.点击按钮弹窗出现
    btn.onclick = function () {
        popBox.style.display = 'block';
        middLogin();
    }
    //弹窗居中
    function middLogin() {
        let iLeft = (window.innerWidth - popBox.offsetWidth) / 2;
        let iTop = (window.innerHeight - popBox.offsetHeight) / 2;
        popBox.style.left = iLeft + 'px';
        popBox.style.top = iTop + 'px';
    }
    //右有上角退出按钮
    popClose.onclick = function () {
        popBox.style.display = 'none';
    }
    //esc退出按钮
    window.onkeydown = function (ev) {
        if (ev.keyCode == 27) {
            popBox.style.display = 'none';
        }
    }
    //窗口改变
    window.onresize = function () {
        middLogin();
    }
}