ES6實現小案例--自定義彈框

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/25/12563033.html

按照國際慣例先放效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale ...


按照國際慣例先放效果圖

 

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo</title>
  <link rel="stylesheet" href="./msg.css">
  <style>
    #pop {
      border: 0 none;
      color: #fff;
      outline: none;
      padding: 10px 20px;
      font-size: 18px;
      background: #2594f0;
      cursor: pointer;
    }

    #pop:active {
      background: blue;
    }
  </style>
</head>

<body>
  <button id="pop">彈個框</button>

<!--   <div class="msg__wrap">
    <div class="msg-header">
      <span>確認刪除</span>
      <span class="msg-header-close-button">×</span>
    </div>
    <div class="msg-body">
      <div class="msg-body-icon">
        <div class="msg-body-icon-wrong"></div>
      </div>
      <div class="msg-body-content">是否刪除</div>
    </div>
    <div class="msg-footer">
      <button class="msg-footer-btn msg-footer-cancel-button">算了吧</button>
      <button class="msg-footer-btn msg-footer-confirm-button">好的</button>
    </div>
  </div> -->
 
  <script src="./msg.js"></script>
  <script type="text/javascript">
    document.querySelector('#pop').addEventListener('click', function() {
      new $Msg({
        content: '賢者模式馬上就過去了...真的要清空嗎?<span style="color: orange;">~~~</span>',
        confirm:function(e){
          console.log("confirm");
          console.log(this);
        },
         cancel:function(e){
          console.log("cancel");
          console.log(this);
        },
        contentStyle:{
          fontSize:"20px",
          background:"lightgreen"
        },
        useHTML:true
      });
    });
  </script>
</body>

</html>

msg.css

/* 彈出框最外層 */
.msg__wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10;
  transition: all .3s;
  transform: translate(-50%, -50%) scale(0, 0);
  max-width: 50%;

  background: #fff;
  box-shadow: 0 0 10px #eee;
  font-size: 10px;
}

/* 彈出框頭部 */
.msg__wrap .msg-header {
  padding: 10px 10px 0 10px;
  font-size: 1.8em;
}

.msg__wrap .msg-header .msg-header-close-button {
  float: right;
  cursor: pointer;
}

/* 彈出框中部 */
.msg__wrap .msg-body {
  padding: 10px 10px 10px 10px;
  display: flex;
}

/* 圖標 */
.msg__wrap .msg-body .msg-body-icon{
  width: 80px;
}

.msg__wrap .msg-body .msg-body-icon div{
  width: 45px;
  height: 45px;
  margin: 0 auto;
  line-height: 45px;
  color: #fff;
  border-radius: 50% 50%;
  font-size: 2em;
}

.msg__wrap .msg-body .msg-body-icon .msg-body-icon-success{
  background: #32a323;
  text-align: center;
}

.msg__wrap .msg-body .msg-body-icon .msg-body-icon-success::after{
  content: "成";
}

.msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong{
  background: #ff8080;
  text-align: center;
}

.msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong::after{
  content: "誤";
}

.msg__wrap .msg-body .msg-body-icon .msg-body-icon-info{
  background: #80b7ff;
  text-align: center;
}

.msg__wrap .msg-body .msg-body-icon .msg-body-icon-info::after{
  content: "註";
}

/* 內容 */
.msg__wrap .msg-body .msg-body-content{
  min-width: 200px;
  font-size: 1.5em;
  word-break: break-all;
  display: flex;
  align-items: center;
  padding-left: 10px;
  box-sizing: border-box;
}

/* 彈出框底部 */
.msg__wrap .msg-footer {
  padding: 0 10px 10px 10px;
  display: flex;
  flex-direction: row-reverse;
}

.msg__wrap .msg-footer .msg-footer-btn {
  width: 50px;
  height: 30px;
  border: 0 none;
  color: #fff;
  outline: none;
  font-size: 1em;
  border-radius: 2px;
  margin-left: 5px;
  cursor: pointer;
}

.msg__wrap .msg-footer .msg-footer-cancel-button{
  background-color: #ff3b3b;
}

.msg__wrap .msg-footer .msg-footer-cancel-button:active{
  background-color: #ff6f6f;
}

.msg__wrap .msg-footer .msg-footer-confirm-button{
  background-color: #4896f0;
}

.msg__wrap .msg-footer .msg-footer-confirm-button:active{
  background-color: #1d5fac;
}

/* 遮罩層 */
.msg__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, .4);
  transition: all .3s;
  opacity: 0;
}

msg.js

//放入自執行的匿名函數,避免污染全局作用域
//將window和document作為參數傳入,可以直接在內部獲取,不用再去外部找,性能更優
(function(window,document){
    //構造函數
    let Msg=function(options){
        //初始化一個彈出框
        this._init(options);
    }

    //初始化一個彈出框
    Msg.prototype._init=function({content="",confirm=null,cancel=null,useHTML=false,contentStyle={},contentFontSize="1.5em"}){
        this.content=content;
        this.confirm=confirm;
        this.cancel=cancel;
        this.useHTML=useHTML;
        this.contentStyle=contentStyle;
        this.contentFontSize=contentFontSize;

        //生成DOM元素
        this._createElement();
        //綁定事件
        this._bind([this._el,this._overlay]);
        //顯示
        this._show([this._el,this._overlay]);
    }

    //生成DOM元素
    Msg.prototype._createElement=function(){
        let wrap=document.createElement("div");
        wrap.className="msg__wrap";
        //換行前加上\轉義
        wrap.innerHTML='<div class="msg-header">\
                          <span>確認刪除</span>\
                          <span class="msg-header-close-button">×</span>\
                        </div>\
                        <div class="msg-body">\
                          <div class="msg-body-icon">\
                            <div class="msg-body-icon-info"></div>\
                          </div>\
                          <div class="msg-body-content"></div>\
                        </div>\
                        <div class="msg-footer">\
                          <button class="msg-footer-btn msg-footer-cancel-button">算了吧</button>\
                          <button class="msg-footer-btn msg-footer-confirm-button">好的</button>\
                        </div>';

        //根據傳入的參數控制content樣式
        let contentDom=wrap.querySelector(".msg-body .msg-body-content");
        //用解構賦值來合併對象
        const contentStyle={
            contentFontSize:this.contentFontSize,
            ...this.contentStyle
        }
        for(let i in contentStyle){
            //如果是自身的屬性
            if(contentStyle.hasOwnProperty(i)){
                //style[i]==>style.i
                //i是屬性名,contentStyle[i]是屬性值
                contentDom.style[i]=contentStyle[i];
            }
        }
        //如果使用html
        if(this.useHTML){
            contentDom.innerHTML=this.content;
        }else{
            contentDom.innerText=this.content;
        }

        let overlay=document.createElement("div");
        overlay.className="msg__overlay";

        this._el=wrap;
        this._overlay=overlay;
    }

    //顯示
    Msg.prototype._show=function([el,overlay]){
        document.body.appendChild(el);
        document.body.appendChild(overlay);

        //設置動畫效果顯示
        //延遲實現非同步效果
        setTimeout(function(){
            el.style.transform='translate(-50%, -50%) scale(1, 1)';        
            overlay.style.opacity=1;    
        });

    }

    //綁定事件
    Msg.prototype._bind=function([el,overlay]){
        const _this=this;

        //隱藏事件
        const hideMsg=function(){
            el.style.transform='translate(-50%, -50%) scale(0, 0)';        
            overlay.style.opacity=0;

            //動畫結束後移除元素(css里設置的動畫時間是300ms)
            setTimeout(function(){
                document.body.removeChild(el);
                document.body.removeChild(overlay);
            },300);            
        }

        //取消事件
        const cancel=function(e){
            //如果傳入了回調,則執行回調,參數是e
            _this.cancel && _this.cancel.call(this._cancel,e);
            hideMsg();
        }

        //確認事件
        const confirm=function(e){
            _this.confirm && _this.confirm.call(_this.confirm,e);
            hideMsg();
        }

        //點擊遮罩
        overlay.addEventListener("click",hideMsg);

        //點擊右上角叉叉
        el.querySelector(".msg-header .msg-header-close-button").addEventListener("click",hideMsg);

        //點擊取消按鈕
        el.querySelector(".msg-footer .msg-footer-cancel-button").addEventListener("click",cancel);

        //點擊確認按鈕
        el.querySelector(".msg-footer .msg-footer-confirm-button").addEventListener("click",confirm);
    }

    //掛到window上可全局訪問
    window.$Msg=Msg;

})(window,document);

 


您的分享是我們最大的動力!

更多相關文章
  • 對於web中的icons的各種實現的利弊,請參考:Web中實現Icon的利弊 本文以阿裡矢量圖標庫為例,說下svg圖標簡單的使用: 挑選圖標下載到本地,文件結構如下: 運行demo_index.html文件,裡面有很詳細的介紹: Unicode 引用 font-class 引用 Symbol 引用 ...
  • 模版字元串 ``反引號表示 var cyy={ name:"cyy", age:18, say:function(){ console.log('我叫'+this.name+',我今年'+this.age+'歲'); }, say2:function(){ console.log(`我叫`+this ...
  • `react router ^5.1.2` 在有正在編輯的內容未保存時,發生了路由切換,此時需要給出一些提示,並由用戶控制是否進行跳轉。 在 進行路由管理時,可以使用 組件實現此功能,其中的 屬性可以接受一個函數,返回 的時候就提示,預設為window.confirm進行提示,用戶可以選擇是否跳轉; ...
  • HTML 鏈接:HTML 使用超級鏈接與網路上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。 HTML 超鏈接(鏈接)? HTML使用標簽 <a>來設置超文本鏈接,是可以從一個頁面指向另一個目的端的鏈接。 超鏈接可以是一個字,一個詞,或者一組詞,也可以是一 ...
  • HTML 段落:段落是通過 <p> 標簽定義的 1 <p>這是一個段落 2 <p>這是另一個段落 註釋:即使忘了使用結束標簽,上面的例子在大多數瀏覽器中都沒問題,但不要依賴這種做法。忘記使用結束標簽會產生意想不到的結果和錯誤。 HTML 折行:在不產生一個新段落的情況下進行換行(新行),請使用 <b ...
  • 初學編程的小伙伴經常會遇到的問題,1.沒資源 2.沒人帶 3.不知道從何開始 ,小編也是從新手期過來的,所以很能理解萌新的難處,現在整理一些以前自己學習的一些資料送給大家,希望對廣大初學小伙伴有幫助! 這套「web前端入門教程」將多年的編程經驗灌輸其中,典型的實踐派。既適合初學者入門,也適合程式員進 ...
  • RPG系統構造 通過對於鬥羅大陸小說的游戲化過程,熟悉Angular的結構以及使用TypeScript的面向對象開發方法。 "Github項目源代碼地址" 人物 和其他RPG游戲類似,游戲裡面的人物角色大致有這樣的一些屬性:生命值,魔法值(魂力),攻擊力,防禦力,速度。RPG游戲中的角色隨著等級的提 ...
  • 這個不是無限級評論,只有兩層,實現起來比較簡單點,所有評論的parent_id都是對應的第一級評論的id,新增評論的時候,就在對應的評論下麵追加,並且用prepend()把最新評論放到最前面 資料庫設計(我這裡沒有真正用到資料庫,為了測試,用的都是寫死的假數據,所以後臺請求的介面只是返回了一個cod ...
一周排行
  • 前幾天發佈了 "抄抄《CSS 故障藝術》的動畫" 這篇文章,在這篇文章里介紹瞭如何使用Win2D繪製文字然後配合BlendEffect製作故障藝術的動畫。本來打算就這樣收手不玩這個動畫了,但後來又發現性能不符合理想。明明只是做做Resize動畫和用BlendEffect混合,為什麼性能會這麼差呢? ...
  • 控制條控制項: progressBar 不能按照你程式的進程自動變化,需認為計算,調整變化量 private void progressBar1_Click(object sender, EventArgs e) { this.progressBar1.Maximum = 100;//設置進度條最大長 ...
  • 首先創建一個asp.net core web應用程式 第二步 目前官方預置了7種模板項目供我們選擇。從中我們可以看出,既有我們熟悉的MVC、WebAPI,又新添加了Razor Page,以及結合比較流行的Angular、React前端框架的模板項目。 空項目模板 Program.cs using S ...
  • 對閉包的理解 1.對於成員變數和局部變數:成員變數就是方法外部,類的內部定義的變數;局部變數就是方法或語句塊內部定義的變數。局部變數必須初始化。 形式參數是局部變數,局部變數的數據存在於棧記憶體中。棧記憶體中的局部變數隨著方法的消失而消失。成員變數存儲在堆中的對象裡面,由垃圾回收器負責回收。 成員變數它 ...
  • Xamarin.Forms讀取並展示Android和iOS通訊錄 TerminalMACS客戶端 本文同步更新地址: https://dotnet9.com/11520.html https://terminalmacs.com/861.html 閱讀導航: 一、功能說明 二、代碼實現 三、源碼獲取 ...
  • 做下對文件複製操作相關的筆記: /// <summary> /// 文件幫助類 /// </summary> public class FileHelper { /// <summary> /// 複製一個目錄下所有文件到一個新目錄下 /// </summary> /// <param name=" ...
  • 前言 有一個東西叫做鴨子類型,所謂鴨子類型就是,只要一個東西表現得像鴨子那麼就能推出這玩意就是鴨子。 C 裡面其實也暗藏了很多類似鴨子類型的東西,但是很多開發者並不知道,因此也就沒法好好利用這些東西,那麼今天我細數一下這些藏在編譯器中的細節。 不是只有 和 才能 在 C 中編寫非同步代碼的時候,我們經 ...
  • [toc] 1.應用背景 底端設備有大量網路報文(位元組數組):心跳報文,數據採集報文,告警報文上報。需要有對應的報文結構去解析這些位元組流數據。 2.結構體解析 由此,我第一點就想到了用結構體去解析。原因有以下兩點: 2.1.結構體存在棧中 類屬於引用類型,存在堆中;結構體屬於值類型,存在棧中,在一個 ...
  • 《深入淺出 C#》 (第3版) [作者] (美) Andrew Stellman (美) Jennifer Greene[譯者] (中) 徐陽 丁小峰 等譯[出版] 中國電力出版社[版次] 2016年08月 第1版[印次] 2018年04月 第4次 印刷[定價] 148.00元 【引子】 要學習編程 ...
  • 記錄使用對象初始值設定項初始化對象。 using System; using System.Collections.Generic; namespace ConsoleApp2 { class Program { static void Main(string[] args) { // 使用構造函數 ...
x