欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

ES6实现小案例--自定义弹框

程序员文章站 2022-07-06 12:37:29
按照国际惯例先放效果图 index.html

按照国际惯例先放效果图

ES6实现小案例--自定义弹框

 

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

 

上一篇： 缓存加速----Redis主从同步集群搭建

下一篇： 微信小程序新闻网站详情页

推荐阅读