共计 3610 个字符，预计需要花费 10 分钟才能阅读完成。
自制手写弹窗
在实际开发中，我们不可避免的需要使用到弹窗，但是我们经常总是直接使用的第三方模态框，这就导致我们自己对于弹窗的理解并不深；如果有时候需要我们手写一个简单弹窗时，你可能写不出来（不要笑，大部分都是，包括有些前端也写不出来）。原因只是我们并没有深入的了解并理解了弹窗的原理。作为一名开发者，我们一定要既知其然又知其所以然，虽然我们不是专业的前端，但是我们也要向全栈方向努力嘛????
直接看代码吧
<!--
created by util.you.com@gmail.com
time: 2019-06-04 22:26
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 自写弹窗，体会原理 </title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style type="text/css">
@import url("https://unpkg.com/element-ui/lib/theme-chalk/index.css");
</style>
</head>
<body>
<div id="app">
<h1> 自制弹窗，理解实现原理 </h1>
<p> 首页内容 </p>
<p> 用户列表: </p>
<el-table ref="multipleTable" :data="userList" border style="width:50%;" height="200px" highlight-current-row >
<el-table-column fixed type="selection" align="center" width="50"></el-table-column>
<el-table-column prop="name" align="center" label="姓名" show-overflow-tooltip min-width="100"></el-table-column>
<el-table-column prop="pwd" align="center" label="密码" show-overflow-tooltip min-width="100"></el-table-column>
</el-table>
<button @click="showDialog"> 显示对话框 </button>
<!-- 弹窗体 -->
<div id="addUserDialog">
<!-- 弹窗的主体内容 -->
<div class="addUser">
<h3 style="background-color: antiquewhite;padding-left: 144px;"> 添加用户 </h3>
<a href="#" id="addUserClose"> 关闭 </a>
<el-form v-model="userForm" style="width: 350px; padding-left: 50px;">
<el-form-item label="账号" >
<el-input type="text" v-model="userForm.userName" placeholder="请输入账号" style="width: 220px;"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password" v-model="userForm.userPwd" placeholder="请输入账号" style="width: 220px;"></el-input>
</el-form-item>
</el-form>
<el-button type="success" @click="addUser" style="margin-left: 120px;"> 确定 </el-button>
<el-button type="danger" @click="cancelAddUser"> 取消 </el-button>
</div>
<!-- 弹窗的背景图层 -->
<div class="addUserBackground"></div>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data(){
return{
userName:'',
userPwd: '',
userList:[{name: '小米', pwd: '123456'},
{name: '劫', pwd: '任我行'}
],
userForm:[],}
},
methods:{showDialog(){
// 点击显示对话框目的：将对话框的 display 变成 block
let addUserDialog = document.getElementById('addUserDialog');
let addUserClose = document.getElementById('addUserClose');
addUserDialog.style.display = 'block';
addUserClose.onclick = function () {addUserDialog.style.display = 'none';}
},
cancelAddUser(){
// 取消或者关闭窗口，就是要讲 该窗口的 display 设置成 none 即可
let addUserDialog = document.getElementById('addUserDialog');
addUserDialog.style.display = 'none';
},
addUser(){
let self = this;
self.userList.push({'name': self.userForm.userName, 'pwd': self.userForm.userPwd});
// 添加完后，将遮罩层去掉
let addUserDialog = document.getElementById('addUserDialog');
addUserDialog.style.display = 'none';
}
}
});
</script>
<style type="text/css">
/* 全局样式 */
body{background-color: #00FFFF;}
/**
以下这四部分样式，是制作一个弹窗最少需要的样式控制, 当然你可以再在此基础上优化
addUser addUserBackground 是最关键的两部分，刚开始背下来样式控制即可，后续理解后再回过头来就明白了
**/
/* 隐藏弹窗 */
#addUserDialog {display: none;}
/* 弹窗样式 */
.addUser {
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;
/* 层次级别 */
z-index: 9999;
}
/* 弹窗背景灰度 */
.addUserBackground {
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
/* 透明度 */
opacity: 0.3;
/* 兼容 ie*/
filter: alpha(opacity=30);
z-index: 9990;
}
#addUserClose {
text-decoration: none;
position: absolute;
right: 10px;
top: 10px;
}
</style>
</body>
</html>
为了方便大家直接使用理解，我这里使用的脚本等都是在线链接，确保大家直接 down 下来就能运行处效果的。而那四个 css 就是弹窗最核心，最关键的部分。大家只要理解这两点就够了：1). 弹窗之所以能起到弹窗效果，是因为它的图层(z-index) 高于 背景层，所以才能跃然背景上；2). 弹窗的启用与关闭，其实就是切换弹窗体的 display 即可。额外说明：在初学时我们一定不明白或者不好想到怎么设置
.addUserBackground和.addUser这两个最关键的 class 属性，没关系，你只需要记住，并且经常使用，慢慢就理解了【有一句话说得好：当我们不理解一件事时，我们只需要去照做、背记即可，用的多了慢慢就理解了】
声明
原创手敲不易，转载请注明出处，谢谢 。我是拉丁小毛，欢迎大家关注我哦，一起交流，共同进步。有问题可以
邮我哦(util.you.com@gmail.com)
正文完
发表至： javascript
2019-06-04
