彈窗實現(自制)

時間 2019-11-08

標籤實現自制简体版

原文原文鏈接

自制手寫彈窗

在實際開發中，咱們不可避免的須要使用到彈窗，可是咱們常常老是直接使用的第三方模態框，這就致使咱們本身對於彈窗的理解並不深；若是有時候須要咱們手寫一個簡單彈窗時，你可能寫不出來（不要笑，大部分都是，包括有些前端也寫不出來）。緣由只是咱們並無深刻的瞭解並理解了彈窗的原理。做爲一名開發者，咱們必定要既知其然又知其因此然，雖然咱們不是專業的前端，可是咱們也要向全棧方向努力嘛😄

直接看代碼吧

<!--
  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)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。