目录
（2）在HTML中的标签内插入弹窗model，并添加唯一标识符（id）：
（3）在CSS文件中分别添加“隐藏弹窗”和“弹窗内容”的指定设置：
（5）在CSS中添加class类名为close的设置（即“×”）：
（6）在JavaScript中添加关闭事件一（点击“×”关闭）：
（7）在JavaScript中添加关闭事件二（点击任意位置关闭）：
一、wHat？
自己要做什么……要为自己设计的浏览器做一个弹窗。
二、wHy？
为什么做这个……别人有的我也要有！
三、hOw？
使用语言：HTML+CSS+JavaScript
开发工具：Visual Studio Code
编写时间：我（边学边做）50分钟，你（看了这篇）5分钟。（你就跟不懂代码的人说做这个要50分钟，剩下45分钟摸鱼）
四、gO！
找到已经编写好的页面，我用的是我之前编写的一个登录界面。
决定一下弹窗该如何出现，我是点击相关按钮跳出弹窗。
如图1，点击“忘记密码”和“注册”就要弹出窗口。
图1
实现代码如下：
（1）在HTML中的<body>标签里找到你要绑定弹窗的按钮：
我的是这句，
<div class="links">
<a type="forgetedpassword" href="#">忘记密码</a>
<a type="signup" href="#">注册</a>
</div>然后在两个标签<a>里添加“id”，这个id必须是唯一的，是“唯一识别符”，后面JavaScript要用到 。比如我添加的，“忘记密码”是[id = "forgetPassword"]、“注册”是[id = "signUp"]，
<div class="links">
<a type="forgetedpassword" id="forgetPassword" href="#">忘记密码</a>
<a type="signup" id="signUp" href="#">注册</a>
</div>（2）在HTML中的<body>标签内插入弹窗model，并添加唯一标识符（id）：
如下，这边列出的是“忘记密码”的弹窗model，“注册”的model可以依葫芦画瓢，并不难~
<!--更改密码model-->
<div id="changepswModel" class="psw-model">
<div class="forgetedpsw-model">
<span class="close">×</span>
<p>这里可以更改密码，但在建设中<br \>loading...</p>
</div>
</div>解释：
①<span>标签内的[×]是符号“×”的字符，也就是关闭按钮。
②<p>标签里内容只是我做的简单的弹窗展示内容。
现在点进网页是这样的：
（看不清就算了……）
<span>标签内容带着<p>标签内容在页面上肆意妄为，那怎么行！那么用CSS和javaScript来约束一下！
（3）在CSS文件中分别添加“隐藏弹窗”和“弹窗内容”的指定设置：
/*弹窗设置*/
/*隐藏弹窗*/
.psw-model{
display: none;/*默认隐藏*/
position: fixed;/*固定位置*/
z-index: 1;/*确保弹窗在顶层*/
left: 0;
top: 0;
width: 100%;/*全屏*/
height: 100%;
overflow: auto;/*允许滚动*/
background-color: #00000050;/*半透明黑色背景*/
}
/*弹窗内容*/
.forgetedpsw-model {
position: relative;
background-color: #f0f8ff;
margin: 15% auto;/*居中 */
padding: 160px;/*弹窗大小设置*/
border: 1px solid #888;
width: 30%;
}解释：
①颜色后面的数字是透明度百分比，比如“background-color: #00000050;”就是#000000颜色透明度50%的意思。
（4）在JavaScript中设置弹窗显示事件：
//forgetpsw弹窗
var forgetPassword = document.getElementById("forgetPassword");
var changeModel = document.getElementById("changepswModel");
//点击相关按钮时显示弹窗forgetpswModel
forgetPassword.onclick = function() {
changeModel.style.display = "block";
}解释：
①声明两个变量，一个读取“忘记密码”文本按钮，另一个读取弹窗；
②设置事件，当执行点击操作时触发事件，弹窗changeModel的显示为“block”，即出现。
注意：唯一标识符id很重要！
做完以上步骤弹窗就有雏形了，如图2。
图2
但是没有办法关闭，而且不好看。
不好看先不说，因为还没正式设计，现在只要能把“×”移到右上角，然后能实现关闭的功能就可以了。
（5）在CSS中添加class类名为close的设置（即“×”）：
/*关闭按钮*/
.close {
position: absolute;
color: #aaa;
top: 1px;
right: 10px;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
}解释：
①.close{}的内容是设置“×”的颜色、位置和大小 。
②下面是设置鼠标移到“×”处的颜色变化等。
做完以上步骤，就看到弹窗变得能看了（只是移动了“×”的位置T_T），此时点开了还不能关闭，如图3所示。
图3
接下来，要实现关闭功能。
我的设想是点击“×”或者点击弹窗以外任意位置（页面内），均可以关闭弹窗。
（6）在JavaScript中添加关闭事件一（点击“×”关闭）：
本段语句是执行点击“×”操作时关闭弹窗。
//当用户点击关闭按钮时，关闭弹窗forgetpswModel
var pswcloseBtn = document.getElementsByClassName("close")[0];
pswcloseBtn.onclick = function() {
changeModel.style.display = "none";
}解释：
①声明变量获取网页中class名为“close”的元素 ，并且因为“[0]”的约束，为第一个“close”类。
②设置点击触发事件，事件展示为“none”，也就是弹窗消失，从而达到关闭弹窗的目的。
（7）在JavaScript中添加关闭事件二（点击任意位置关闭）：
本段语句是执行点击网页弹窗非白框处任意位置操作时，关闭弹窗。
//当用户点击弹窗中间白框外任意位置时，关闭弹窗
window.onclick = function(event) {
if(event.target == changeModel) {
changeModel.style.display = "none";
}
}解释：
①给window添加一个点击事件监听器，当使用者在设定的位置点击时这个事件就会被触发。
②因为之前在CSS中设定弹窗是占满全屏的：.psw-model { width: 100%; height: 100%; }，所以这里if的条件就是当点击事件的值为“changeModel”时候，也就是点击changeModel的任意位置()。
注意：if条件逻辑有点难理解且不够优雅，但是毕竟每月税前3000（苦笑），Done is better than perfect~
至此，基本已经完成啦！
“注册”是相同语句，套公式就行~
不过要注意的是，在JavaScript中事件的触发要有顺序的，所以当两件事都会被触发时就要给他们排个序！
比如有两个弹窗都会触发点击“×”关闭时，就给它们添加一个顺序，如图4所示。
图4
以及点击任意位置关闭弹窗，由于一次只会打开一个占满屏幕的弹窗，所以可以公用一个点击事件，如图5所示。
图5
五、非正经总结
前端是不是很简单！
只要能够构想出网页大致模块，知道自己要做什么，该怎么做，理解逻辑基本就差不多了。句子什么的都是公式，记不住也没事，百●度G●●gle任君挑选。
不过我这种科班四年出来仍是小白任重道远……
六、小彩蛋/小事故
我在摸索期间发现一个很好玩的事情，当时给弹窗写CSS的时候没把握好位置，导致字符“×”跑到了整个弹窗右上角，而不是白框右上角，于是……如图6所示。
图6
很眼熟……
这不就是……
一些网页弹窗广告爱用的招数嘛……
掌握了一个流氓技能（？）
OK！
结束！下次有好玩的有用的技能，我再来记录~
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
