css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】

男娘i 2022-12-08 14:28 125阅读 0赞

***目   录***

1、遮罩层的制作

2、信息层

3、往白色的块里添加表单

--------------------

# 1、遮罩层的制作 #

> ![20200920115959640.png][]

<!DOCTYPE html>
    <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>

# 2、信息层 #

> 主要是白色底的一个盒子。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70][]

# 3、往白色的块里添加表单 #

> 简单的调整样式
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <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>

> ✨多谢观看~

[20200920115959640.png]: /images/20221123/6da78ab050cc4aa4bfa40b23d7d82816.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70]: /images/20221123/f587d0a66f1e4d7f86669b8ec1b2072a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/33a6da7bfafd4116bcf92b8dab676a6a.png