前端小技巧连载-模态对话框

最新推荐文章于 2024-07-20 17:41:17 发布

kobe_OKOK_

最新推荐文章于 2024-07-20 17:41:17 发布

阅读量198

点赞数

分类专栏：大前端文章标签： html javascript css

本文链接：https://blog.csdn.net/kobe_okok/article/details/117409838

版权

大前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章目录

1 什么是模态对话框
2 怎么做模态对话框

1 什么是模态对话框

在这里插入图片描述
如上图百度的登录界面，所谓模态对话框就是在原画面上面弹出一个遮罩层和对话框。

2 怎么做模态对话框

在这里插入图片描述

在这里插入图片描述
模态对话框分为三层，最底层是HTML页面，中间层是遮罩层，最上层是对话框层。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态对话框</title>
    <style>
        #shadow { /* 通过ID选择器选择到遮罩层 */
            position: fixed; 
            /* 
            position：元素的位置  
			          fixed：以窗口做为参考，固定在窗口上
			          absolute:绝对定位坐标
			          relative：相对定位坐标 
			*/
            top: 0; /* 到窗口顶端的距离 */
            right: 0; /* 到窗口右端的距离 */
            bottom: 0; /* 到窗口底端的距离 */
            left: 0; /* 到窗口左端的距离 */
            background-color: antiquewhite; /* 背景颜色 */
            opacity: 0.4; /* 不透明度 1为最大。最不透明 0为最小，最透明 */
            z-index: 100; /* z-index 表示不同层的可见度，这个数值越大，层级越高*/
        }

        #model {
            position: fixed;  
            left: 50%; /* 距离左侧50% */
            top: 50%; /* 距离顶端50% */
            height: 300px; /* 高度300个像素*/
            width: 400px;/* 宽度300个像素*/
            z-index: 200; /* 层级*/
            background-color: darkseagreen;/* 背景颜色*/
            margin-left: -200px; /* 外边框距离左边的距离*/
            margin-top: -150px;  /* 外边框距离上面的距离*/
        }

        .hide {
            display: none; /* display可见性 */
        }
    </style>
</head>
<body>
<h1>这是主界面</h1>
<div id="shadow" class="hide">  {# 遮罩层 #}
</div>
<div id="model" class="hide">   {# 对话框层 #}
    <h2>对话框</h2>
    <input type="text" name="name" placeholder="请输入信息">
    <input type="text" name="name" placeholder="请输入信息">
    <input type="button" value="提交">
    <input type="button" onclick="cancel()" value="返回">
</div>
<button onclick="showModel();">显示对话框</button> 
<script>
    function showModel() {  // 显示对话框
        document.getElementById("shadow").classList.remove("hide");
        document.getElementById("model").classList.remove("hide");
    }

    function cancel() {  // 取消对话框
        document.getElementById("shadow").classList.add("hide");
        document.getElementById("model").classList.add("hide");
    }
</script>
</body>
</html>