JavaScript之实例练习（模态对话框详解）

梦里梦外; 2023-03-13 11:47 141阅读 0赞

### 文章目录 ###

*   *   *   *  一、Class的属性
             *  二、模态对话框

#### 一、Class的属性 ####

**1、class的常用操作**

*  获取对象所有class： `elementNode.className`
 *  给对象添加class：`elementNode.classList.add`
 *  给对象去除class：`elementNode.classList.remove`

**2、练习代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Class属性</title>
    </head>
    <body>
    
    <div class="div1 div2">空空</div>
    
    <script>
        var ele=document.getElementsByTagName("div")[0];
    
        console.log(ele.className);  //所有class名
        console.log(ele.classList[0]);  //第一个class名
        console.log(ele.classList[1]);  //第二个class名
        
        ele.classList.add("NewName");  //再添加一个class名
        console.log(ele.className);
    
    </script>
    
    </body>
    </html>

**3、测试结果**  
![1][]  
*以上四条结果分别对应代码块中的四个console.log指令*

#### 二、模态对话框 ####

**1、效果分析**  
可能有些人不知道模态对话框是什么，这里用抽屉首页举个图例  
![2][]  
可以看到，网页总共总共分为三层，背景层、遮罩层和模态对话框，当点击登录就会弹出这个界面，点击×叉叉就会退出界面，这就是一个模态对话框的工作效果

**2、原理分析**  
其实这个不难实现，刚开始访问时，我们默认给它们添加一个hide的class名字，这样就会将拥有这个hide名字的遮罩标签和对话框标签隐藏起来，：

.hide{ 
                display:none;
            }

然后添加一个“登录”按钮，绑定事件onclick和执行函数show()，在这个show里面，我们将遮罩标签和对话框标签那个hide的class名去掉，就没有隐藏效果了，就显示出来了：

function show(){ 
            var ele_shade=document.getElementsByClassName("shade")[0];
            var ele_model=document.getElementsByClassName("model")[0];
    
            //去除标签的一个class名，即隐藏效果的class被去除了就不隐藏了，被显示在页面上
            ele_shade.classList.remove("hide");
            ele_model.classList.remove("hide");
        }

同理，添加一个“取消”按钮，绑定事件和cancel()函数，在cancel中，又给遮罩标签和对话框标签添加上那个hide的class名：

function cancel(){ 
            var ele_shade=document.getElementsByClassName("shade")[0];
            var ele_model=document.getElementsByClassName("model")[0];
    
            //添加隐藏效果的class名,则被隐藏起来
            ele_shade.classList.add("hide");
            ele_model.classList.add("hide");
    
            console.log(ele_shade.classList)
            console.log(ele_model.classList)
        }

**3、练习代码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模态对话框</title>
        <style>
            .content{ 
                height: 1500px;
                background-color: white;
            }
    
            .shade{ 
                position: fixed;
                top:8px;
                left: 8px;
                right: 8px;
                bottom: 8px;
                background-color: grey;
                opacity: 0.5;  /*透明度*/
            }
    
            .model{ 
                width:200px;
                height: 200px;
                background-color: yellowgreen;
                position:fixed;
                top:50%;
                left:50%;
                margin-top: -100px;
                margin-left: -100px;
            }
    
            /*刚访问时让组件隐藏起来*/
            .hide{ 
                display:none;
            }
        </style>
    </head>
    <body>
    
    <div class="content">
        <button onclick="show()">登陆</button>
        我是背景层！
    </div>
    
    <div class="shade hide"></div>
    
    
    <div class="model hide">
        <button onclick="cancel()">取消</button>
        model部分
    </div>
    
    
    <script>
        function show(){ 
            var ele_shade=document.getElementsByClassName("shade")[0];
            var ele_model=document.getElementsByClassName("model")[0];
    
            //去除标签的一个class名，即隐藏效果的class被去除了就不隐藏了，被显示在页面上
            ele_shade.classList.remove("hide");
            ele_model.classList.remove("hide");
        }
    
        function cancel(){ 
            var ele_shade=document.getElementsByClassName("shade")[0];
            var ele_model=document.getElementsByClassName("model")[0];
    
            //添加隐藏效果的class名,则被隐藏起来
            ele_shade.classList.add("hide");
            ele_model.classList.add("hide");
    
            console.log(ele_shade.classList)
            console.log(ele_model.classList)
        }
    </script>
    </body>
    </html>

**4、测试结果：**  
![3][]  
这样，效果就能实现了，点击登陆就出现模态对话框，点击取消就将遮罩层和对话框隐藏

[1]: /images/20230312/d1958cb616c14dfba25a04e9f9865752.png
[2]: https://img-blog.csdnimg.cn/2020051313063178.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ZpZXdpbmZpbml0ZWx5,size_16,color_FFFFFF,t_70
[3]: https://img-blog.csdnimg.cn/20200513131716704.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ZpZXdpbmZpbml0ZWx5,size_16,color_FFFFFF,t_70