css-模态框的制过过程

最新推荐文章于 2026-05-02 09:10:06 发布

原创最新推荐文章于 2026-05-02 09:10:06 发布 · 966 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了如何使用HTML和CSS创建遮罩层和信息层，通过固定定位和透明度设置，实现了页面元素的遮盖效果，并在白色信息层中添加了表单，展示了基本的样式调整。

遮罩层的制作

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            background: black;
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            opacity: 0.4;
        }
    </style>
</head>
<body>

<input type="button" value="显示">
<div class="modal">1</div>
<div class="info">2</div>

</body>
</html>

在这里插入图片描述

信息层

主要是白色底的一个盒子

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            background: black;
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            opacity: 0.4;
        }

        .info{
            position: fixed;
            background-color: white;
            width: 400px;
            height: 300px;
            left:50%;
            top: 50%;
            margin-top:-150px;
            margin-left:-200px;
        }
    </style>
</head>
<body>

<input type="button" value="显示">
<div class="modal">1</div>
<div class="info">2</div>

</body>
</html>

在这里插入图片描述

往白色的块里添加表单

并且简单的调整样式

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            background: black;
            position:fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            opacity: 0.4;
        }

        .info{
            position: fixed;
            background-color: white;
            width: 400px;
            height: 300px;
            left:50%;
            top: 50%;
            margin-top:-150px;
            margin-left:-200px;
        }
        form{
            width: 80%;
            height: 40%;
            /*background-color: yellow;*/
            margin: 50px auto 0;

        }
    </style>
</head>
<body>

<input type="button" value="显示">

<!--遮罩层-->
<div class="modal">1</div>

<!--信息层-->
<div class="info">
<!--    表单-->
    <form action="">
        姓名：<input type="text" name="username"> <br>
        <input type="submit" value="提交">
        <input type="button" value="取消">
    </form>
</div>

</body>
</html>

在这里插入图片描述