弹窗实现(自制)

栏目: CSS · 发布时间: 6年前

内容简介：在实际开发中，我们不可避免的需要使用到弹窗，但是我们经常总是直接使用的第三方模态框，这就导致我们自己对于弹窗的理解并不深；如果有时候需要我们手写一个简单弹窗时，你可能写不出来（不要笑，大部分都是，包括有些前端也写不出来）。原因只是我们并没有深入的了解并理解了弹窗的原理。作为一名开发者，我们一定要既知其然又知其所以然，虽然我们不是专业的前端，但是我们也要向全栈方向努力嘛: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)


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Persuasive Technology

Persuasive Technology

B.J. Fogg / Morgan Kaufmann / 2002-12 / USD 39.95

Can computers change what you think and do? Can they motivate you to stop smoking, persuade you to buy insurance, or convince you to join the Army? "Yes, they can," says Dr. B.J. Fogg, directo......一起来看看 《Persuasive Technology》 这本书的介绍吧!

码农工具
JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2026 码农网 粤ICP备17054400号-3