内容简介:在实际开发中,我们不可避免的需要使用到弹窗,但是我们经常总是直接使用的第三方模态框,这就导致我们自己对于弹窗的理解并不深;如果有时候需要我们手写一个简单弹窗时,你可能写不出来(不要笑,大部分都是,包括有些前端也写不出来)。原因只是我们并没有深入的了解并理解了弹窗的原理。作为一名开发者,我们一定要既知其然又知其所以然,虽然我们不是专业的前端,但是我们也要向全栈方向努力嘛:smile:为了方便大家直接使用理解,我这里使用的脚本等都是在线链接,确保大家直接 down 下来就能运行处效果的。而那四个css就是弹窗最
自制手写弹窗
在实际开发中,我们不可避免的需要使用到弹窗,但是我们经常总是直接使用的第三方模态框,这就导致我们自己对于弹窗的理解并不深;如果有时候需要我们手写一个简单弹窗时,你可能写不出来(不要笑,大部分都是,包括有些前端也写不出来)。原因只是我们并没有深入的了解并理解了弹窗的原理。作为一名开发者,我们一定要既知其然又知其所以然,虽然我们不是专业的前端,但是我们也要向全栈方向努力嘛:smile:
直接看代码吧
<!-- 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)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 自制简单的诗歌搜索系统
- 游戏制作之路(54)自制天空盒
- 使用 .NET 5 自制编程语言
- Python自制PornHub风格的LOGO
- 仿造 Gson 的自制 json 解析器
- Linux内核+Busybox自制linux系统
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
松本行弘的程序世界
松本行弘 / 柳德燕、李黎明、夏倩、张文旭 / 人民邮电出版社 / 2011-8 / 75.00元
《松本行弘的程序世界》是探索程序设计思想和方法的经典之作。作者从全局的角度,利用大量的程序示例及图表,深刻阐述了Ruby编程语言的设计理念,并以独特的视角考察了与编程相关的各种技术。阅读《松本行弘的程序世界》不仅可以深入了解编程领域各个要素之间的关系,而且能够学到大师的思考方法。 《松本行弘的程序世界》面向各层次程序设计人员和编程爱好者,也可以供相关技术人员参考。一起来看看 《松本行弘的程序世界》 这本书的介绍吧!