练习3. 对话框控件

对话框的UI组件

1. 对话框的中心默认在屏幕正中，当对话框显示时，屏幕滚动时，对话框始终保持位置固定在屏幕正中，不随屏幕滚动而变化位置；或者禁止页面在有对话框出现时滚动；
2. 当对话框显示时，点击对话框以外的部分，关闭对话框；
3. 可以实现一个半透明的遮罩来挡住对话框外的部分；
4. 提供函数显示和关闭对话框；
5. 对话框的窗口大小可以是一个默认固定值，也可以是随内容变化而自适应变化，也可以是通过接口参数进行调整；

要求：

1. 改写为query的实现代码；
2. 封装为全部动态模式，即点击按钮自动创建对话框，而不是将html代码写在html文件中；

HTML代码

展示/隐藏

    

    

        

            

                ×
                
这是一个浮动层
            
            

                
这是一个浮出层
            
            

                确定
                取消
            
        
        
    
    

CSS代码

body {
    height: 100%;
}

.overlay-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    cursor: pointer;
}
.hide {
    display: none!important;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    /* width: 600px; */
    margin: 0 auto;
    display: flex;
    height: 100%;
    /* border: 1px solid red; */
    justify-content: center;
    align-items: center;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
    width: 600px;
    z-index: 20;
}

.modal .close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5)
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000
}

.modal-backdrop .fade {
    filter: alpha(opacity=0);
    opacity: 0
}

.modal-backdrop .in {
    filter: alpha(opacity=50);
    opacity: .5
}

.modal-header {
    min-height: 16.43px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5
}

.modal-header .close {
    margin-top: -2px
}

.modal-title {
    margin: 0;
    line-height: 1.42857143
}

.modal-body {
    position: relative;
    padding: 15px
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5
}

.modal-footer .btn+.btn {
    margin-bottom: 0;
    margin-left: 5px
}

.modal-footer .btn-group .btn+.btn {
    margin-left: -1px
}

.modal-footer .btn-block+.btn-block {
    margin-left: 0
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

JS代码

window.onload = function() {
  var data = {
    title: '这是测试标题',
    content: '这是测试里的内容',
    type: 'default',
    func: function() {
      console.log("2333");
    },
  };
  modal(data);

  function modal(data) {
    var config = data;
    console.log(data);
    var modalBox = {
      modalConfig: {
        title: config.title || '默认标题', // modal标题
        content: config.content || '这是默认的内容', // modal内容
        //type: config.type, // modal类型
        func: config.func || 0, // 其他处理方法
      },
      //modal显示/隐藏
      toggle: function() {
        var modal = document.getElementById("modal");
        console.log('show');
        if (modal.className.indexOf('hide')) {
          modal.className = 'modal';
        } else {
          modal.className = 'modal hide';
        }
      },
      init: function() {
        var that = this;
        var modal = document.getElementById("modal");
        //写入配置
        document.querySelector(".modal-title").innerText = that.modalConfig.title;
        document.querySelector(".modal-body").innerText = that.modalConfig.content;
        document.querySelector(".modal-title").innerText = that.modalConfig.title;
        //监听事件
        document.querySelector(".toggle").addEventListener('click', function() {
          that.toggle();
        }, false);

        //遮罩层隐藏
        document.querySelector("#overlay-mask").addEventListener('click', function() {
          document.getElementById("modal").className = 'modal hide';

        }, false);
        //取消事件
        document.querySelector(".modal-cancel").addEventListener('click', function() {
          document.getElementById("modal").className = 'modal hide';
        }, false);

        document.querySelector(".modal-func").addEventListener('click', function() {
          //如果没有指定处理函数
          if (that.modalConfig.func == 0) {
            document.getElementById("modal").className = 'modal hide';
          } else {
            that.modalConfig.func();
            document.getElementById("modal").className = 'modal hide';
          }
        }, false);
      }

    }
    return modalBox.init();
  }
}