克己手写弹窗
在现实开辟中，我们不可避免的须要运用到弹窗，然则我们常常老是直接运用的第三方模态框，这就致使我们本身关于弹窗的邃晓并不深；假如有时候须要我们手写一个简朴弹窗时，你可能写不出来（不要笑，大部份都是，包含有些前端也写不出来）。缘由只是我们并没有深切的相识并邃晓了弹窗的道理。作为一位开辟者，我们肯定要既知其然又知其所以然，虽然我们不是专业的前端，然则我们也要向全栈方向勤奋嘛😄
直接看代码吧
<!--
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)
