JS模态对话框

Posted 2020-12-08 何所为

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS模态对话框相关的知识，希望对你有一定的参考价值。

模态框1

思路

1.界面点击按钮
2.遮罩层
3.带确定按钮等的一个小页面

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
            .content {
                height: 1080px;
                background-color: pink;
            }

            .shade {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: gray;
                opacity: 0.5;
            }

            .model {
                width: 200px;
                height: 200px;
                background-color: bisque;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -100px;
                margin-left: -100px;
            }

            .hide {
                display: none;
            }
        </style>

    </head>
    <body>
        <div class="content">
            <button onclick="func()">show</button>
            <!-- 界面点击按钮 -->
            hello world
        </div>
        <!-- 遮罩层 -->
        <div class="shade hide"></div>
        <!-- 带确定按钮等的一个小页面 -->
        <div class="model hide">
            <button onclick="cancel()">show</button>
        </div>

        <script type="text/javascript">
            function func(argument) {
                // 界面按钮点击时取消隐藏的元素（显示小页面和遮罩层）
                var ele_shade = document.getElementsByClassName(‘shade‘)[0]
                ele_model.classList.remove("hide")
                var ele_model = document.getElementsByClassName(‘model‘)[0]
                ele_shade.classList.remove("hide")
            }

            function cancel() {
                // 点击小页面按钮时隐藏小页面和遮罩层
                var ele_shade = document.getElementsByClassName("shade")[0]
                var ele_model = document.getElementsByClassName("model")[0]
                ele_model.classList.add("hide")
                ele_shade.classList.add("hide")
            }
        </script>
    </body>
</html>

模态框2

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .c1{
           position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #0f0f0f;
            opacity: 0.5;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: #f9f9f9;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-top: -200px;
            margin-left: -250px;
            z-index: 10;

        }
        .hide{
            display: none;
        }
    </style>
    </head>
    <body style="margin: 0;">
        <div>
            <input type="button" value="添加" onclick="ShowMod();">
        </div>
        <!--遮罩层开始-->
        <div id=‘id1‘ class="c1 hide">

        </div>
        <!--遮罩层结束-->
        <!--弹出框开始-->

        <div id=‘id2‘ class="c2 hide">
            <p class="=c3"><input type="text" placeholder="username"></p>
            <p><input type="password" placeholder="password"></p>
            <p><input type="button" value="取消" onclick="HideMod();">
                <input type="button" value="确定"></p>

        </div>
        <!--弹出框结束-->
        <script>
            function ShowMod() {
                document.getElementById(‘id1‘).classList.remove(‘hide‘);
                document.getElementById(‘id2‘).classList.remove(‘hide‘);

            }

            function HideMod() {
                document.getElementById(‘id1‘).classList.add(‘hide‘);
                document.getElementById(‘id2‘).classList.add(‘hide‘);

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

以上是关于JS模态对话框的主要内容，如果未能解决你的问题，请参考以下文章

模态框 modal.js

js+css+html点击登录后弹出可拖拽的模态框

模态对话框如何调用父窗口的JS函数？

JS模态对话框

JS模态对话框

模态框1

模态框2