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

文章目录

一、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、测试结果

以上四条结果分别对应代码块中的四个console.log指令

二、模态对话框

1、效果分析
可能有些人不知道模态对话框是什么，这里用抽屉首页举个图例

可以看到，网页总共总共分为三层，背景层、遮罩层和模态对话框，当点击登录就会弹出这个界面，点击×叉叉就会退出界面，这就是一个模态对话框的工作效果

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>
<!--遮罩层：加在content表面的一层，让原来的页面颜色变淡--><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、测试结果：

这样，效果就能实现了，点击登陆就出现模态对话框，点击取消就将遮罩层和对话框隐藏

JavaScript之实例练习（模态对话框详解）相关推荐

php中this的使用技巧,JavaScript中this关键字使用方法详解
JavaScript中this关键字使用方法详解在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...
JavaScript 面试中常见算法问题详解
JavaScript 面试中常见算法问题详解,翻译自 https://github.com/kennymkchan/interview-questions-in-javascript.下文提到的很多问 ...
html+css+javascript实现小游戏2048（详解，附源代码）
html+css+javascript实现小游戏2048(详解,附源代码) 1.上下左右的移动原理相同,这里只详细说明向上移动的方法 2.这里的上下左右由wasd四个键控制 3-小方块空的意思就是没数 ...
JavaScript 的addEventListener() 事件监听详解！
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
抢鲜体验：Oracle 19C单实例数据库安装步骤详解
抢鲜体验:Oracle 19C单实例数据库安装步骤详解原创: 李宏达数据和云今天作者:李宏达,云和恩墨北区交付工程师. 大家一直期待的 Oracle Database 19c 今天已经提供公开 ...
海康工业相机SDK+OpenCV实例(2)：RawDataFormatConvert详解
海康工业相机SDK+OpenCV实例(2): RawDataFormatConvert详解文章目录海康工业相机SDK+OpenCV实例(2): RawDataFormatConvert详解前言 ...
mysql varchar类型实例_Mysql实例MySQL数据类型varchar详解
<Mysql实例MySQL数据类型varchar详解>要点: 本文介绍了Mysql实例MySQL数据类型varchar详解,希望对您有用.如果有疑问,可以联系我们.1.varchar(N) ...
模糊控制应用实例——洗衣机的模糊控制详解
模糊控制应用实例--洗衣机的模糊控制详解模糊控制的一般流程(以洗衣机为例) (1)确定模糊控制器的结构控制器的输入为衣物的污泥和油脂控制器的输出为洗涤时间 (2)定义输入.输出的模糊集污泥定义 ...
Android基础入门教程——2.5.3 AlertDialog(对话框)详解
Android基础入门教程--2.5.3 AlertDialog(对话框)详解标签(空格分隔): Android基础入门教程本节引言: 本节继续给大家带来是显示提示信息的第三个控件AlertDia ...

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

文章目录

一、Class的属性

二、模态对话框

JavaScript之实例练习（模态对话框详解）相关推荐

最新文章

热门文章