弹窗实现(自制)

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

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


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

查看所有标签

猜你喜欢:

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

大数据大创新:阿里巴巴云上数据中台之道

大数据大创新:阿里巴巴云上数据中台之道

邓中华 / 电子工业出版社 / 2018-11 / 99

阿里巴巴云上数据中台正服务着阿里生态中的数十个业务板块、百余家公司、千万级客户,在帮助决策层看清甚至决定业态走向的同时,在上万个业务场景中应用并催生创新。 《大数据大创新:阿里巴巴云上数据中台之道》基于作者在阿里巴巴的十年大数据从业经历,精彩演绎云上数据中台之道。《大数据大创新:阿里巴巴云上数据中台之道》基于大数据探索的大趋势,讲述阿里巴巴云上数据中台顶层设计,再以实际案例详述阿里巴巴云上数......一起来看看 《大数据大创新:阿里巴巴云上数据中台之道》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具