js实现简单弹出层功能

最新推荐文章于 2024-04-05 00:39:18 发布

buside

最新推荐文章于 2024-04-05 00:39:18 发布

阅读量2.4k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/buside/article/details/89917372

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang='zh'>
<head>
    <meta charset="utf-8">
    <title>实现简易弹窗</title>
    <style>
        .box-modal{
            display: flex;
            justify-content: center;
            position: fixed;
            left: 0; 
            top: 0;
            right: 0;
            bottom: 0;
        }        
    </style>
    <script type="text/javascript">
       
            let Box = {};
            Box.close = () =>{
                let body = document.body;
                let modal = body.querySelectorAll(".box-modal");
                modal.forEach((dom) => {
                    dom.parentNode.removeChild(dom);
                })
            };
            Box.show = (boxhtml) => {
                Box.close;
                let Dom = document.createElement('div');
                Dom.classList.add('box-modal');
                Dom.innerHTML = boxhtml;
                document.body.append(Dom);
            };

            function showcustom(){
                let innerhtml = `<div style="background-color:#eee;width:400px;height:140px;border:1px solid #666;align-self:center;padding:15px">
            <h3>弹出层标题</h3>
            <p>弹出框内容</p>
            <div style="text-align:center"><button onclick="Box.close()">取消</button><button onclick="Box.close()">确定</button></div>
        </div>`;
                Box.show(innerhtml);
            }
       
    </script>
</head>
<body>
    <h1>点击弹出窗口</h1>
    <button onclick="showcustom()">弹窗</button>
</body>
</html>

buside

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现简单弹出层功能

<!DOCTYPE html><html lang='zh'><head> <meta charset="utf-8"> <title>实现简易弹窗</title> <style> .box-modal{ display: flex; ...
复制链接

扫一扫

专栏目录