ES6實現小案例--自定義彈框_ZenDei技術網路在線

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

-Advertisement-

按照國際慣例先放效果圖 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);

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

-Advertisement-

更多相關文章

svg圖標

對於web中的icons的各種實現的利弊，請參考：Web中實現Icon的利弊本文以阿裡矢量圖標庫為例，說下svg圖標簡單的使用：挑選圖標下載到本地，文件結構如下：運行demo_index.html文件，裡面有很詳細的介紹： Unicode 引用 font-class 引用 Symbol 引用 ...
ES6 字元串擴展+正則擴展+數值擴展

模版字元串 ``反引號表示 var cyy={ name:"cyy", age:18, say:function(){ console.log('我叫'+this.name+',我今年'+this.age+'歲'); }, say2:function(){ console.log(`我叫`+this ...
react-router 在路由切換時進行提示

`react router ^5.1.2` 在有正在編輯的內容未保存時，發生了路由切換，此時需要給出一些提示，並由用戶控制是否進行跳轉。在進行路由管理時，可以使用組件實現此功能，其中的屬性可以接受一個函數，返回的時候就提示，預設為window.confirm進行提示，用戶可以選擇是否跳轉； ...
HTML 鏈接展現形式與target屬性和錨文本設置

HTML 鏈接：HTML 使用超級鏈接與網路上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。 HTML 超鏈接（鏈接）？ HTML使用標簽 <a>來設置超文本鏈接，是可以從一個頁面指向另一個目的端的鏈接。超鏈接可以是一個字，一個詞，或者一組詞，也可以是一 ...
HTML 段落與常見的HTML 格式化標簽

HTML 段落：段落是通過 <p> 標簽定義的 1 <p>這是一個段落 2 <p>這是另一個段落註釋：即使忘了使用結束標簽，上面的例子在大多數瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標簽會產生意想不到的結果和錯誤。 HTML 折行：在不產生一個新段落的情況下進行換行（新行），請使用 <b ...
web前端該怎麼入門?web前端入門教程(非常詳細)

初學編程的小伙伴經常會遇到的問題，1.沒資源 2.沒人帶 3.不知道從何開始，小編也是從新手期過來的，所以很能理解萌新的難處，現在整理一些以前自己學習的一些資料送給大家，希望對廣大初學小伙伴有幫助！這套「web前端入門教程」將多年的編程經驗灌輸其中，典型的實踐派。既適合初學者入門，也適合程式員進 ...
【開源】使用Angular9和TypeScript開發RPG游戲

RPG系統構造通過對於鬥羅大陸小說的游戲化過程，熟悉Angular的結構以及使用TypeScript的面向對象開發方法。 "Github項目源代碼地址" 人物和其他RPG游戲類似，游戲裡面的人物角色大致有這樣的一些屬性：生命值，魔法值（魂力），攻擊力，防禦力，速度。RPG游戲中的角色隨著等級的提 ...
thinkphp+jquery實現兩級評論回覆效果

這個不是無限級評論，只有兩層，實現起來比較簡單點，所有評論的parent_id都是對應的第一級評論的id，新增評論的時候，就在對應的評論下麵追加，並且用prepend()把最新評論放到最前面資料庫設計（我這裡沒有真正用到資料庫，為了測試，用的都是寫死的假數據，所以後臺請求的介面只是返回了一個cod ...