JavaScript----实现简单的模态对话框

最新推荐文章于 2022-03-20 23:10:14 发布

天道酬勤Fan

最新推荐文章于 2022-03-20 23:10:14 发布

阅读量697

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/weixin_42567323/article/details/101422280

版权

前言

做一个模态对话框的小例子。

1.简单设计

学了一些js的知识以后，这里就结合HTM和CSS来做一个简单的模态对话框。
要实现的功能：点击添加按钮，就让背景色变成灰色，然后出现一个对话框，在对话框中点击取消，就又回到原来的页面。

2.实现

（1）先实现主界面：

<div>
        <input type="button" value="添加" onclick="ShowModel()">
        <table>
            <thead>
                <tr>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.1.1.1</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>1.1.1.2</td>
                    <td>92</td>
                </tr>
                <tr>
                    <td>1.1.1.3</td>
                    <td>93</td>
                </tr>
            </tbody>
        </table>
    </div>

页面效果：
在这里插入图片描述

(2)添加遮罩层

<!--    遮罩层开始，第二层背景透明色-->
    <div id="i1" class="c1 hide">

    </div>
    <!--    遮罩层结束-->

		.hide{
            display: none;  /* 默认不显示*/
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;   /* 透明度*/
            z-index: 9;
        }

注：遮罩层默认是不显示的，所以要设置display: none; /* 默认不显示*/

（3）添加对话框

<!--弹出框开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text"></p>
        <p><input type="text"></p>
        <p>
            <input type="button" value="取消" onclick="HideModel()">
            <input type="button" value="确定">
        </p>
    </div>
    <!--弹出框结束-->

		.hide{
            display: none;  /* 默认不显示*/
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }

（4）添加功能

我们要添加两个功能：

点击添加按钮，出现遮罩层以及对话框
点击对话框中的取消按钮，使遮罩层以及对话框消失。

要实现上述两个功能，我们需要这么做：

给添加按钮添加一个onclick属性，点击按钮，就执行函数，函数要实现的是：获取到遮罩层以及对话框的hide属性并且将其移除（remove），这样就能显示出来了；
对于取消按钮，也是一样的，只不过这个时候要添加（add）上hide属性，这时候就能不显示了。

<script>
        function ShowModel() {
            document.getElementById('i1').classList.remove('hide')
            document.getElementById('i2').classList.remove('hide')
        }

        function HideModel() {
            document.getElementById('i1').classList.add('hide')
            document.getElementById('i2').classList.add('hide')
        }
    </script>

(5)最终效果

初始状态：
在这里插入图片描述

点击添加按钮后：
在这里插入图片描述

点击取消按钮：
在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例之模态对话框</title>
    <style>
        .hide{
            display: none;  /* 默认不显示*/
        }
        .c1{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;   /* 透明度*/
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0;"> <!--去掉边框-->
    <div>
        <input type="button" value="添加" onclick="ShowModel()">
        <table>
            <thead>
                <tr>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.1.1.1</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>1.1.1.2</td>
                    <td>92</td>
                </tr>
                <tr>
                    <td>1.1.1.3</td>
                    <td>93</td>
                </tr>
            </tbody>
        </table>
    </div>


    <!--    遮罩层开始，第二层背景透明色-->
    <div id="i1" class="c1 hide">

    </div>
    <!--    遮罩层结束-->

    <!--弹出框开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text"></p>
        <p><input type="text"></p>
        <p>
            <input type="button" value="取消" onclick="HideModel()">
            <input type="button" value="确定">
        </p>
    </div>
    <!--弹出框结束-->

    <script>
        function ShowModel() {
            document.getElementById('i1').classList.remove('hide')
            document.getElementById('i2').classList.remove('hide')
        }

        function HideModel() {
            document.getElementById('i1').classList.add('hide')
            document.getElementById('i2').classList.add('hide')
        }
    </script>
</body>
</html>