dom

参考网站
http://blog.csdn.net/zxf13598202302/article/details/50485113

使用DOM(文档对象模型)

dom

// 使用createElement创建元素
var dialog = document.createElement('div');
var img = document.createElement('img');
var btn = document.createElement('input');
var content = document.createElement('span');
// 添加
classdialog.className = 'dialog';
// 属性
img.src = 'close.gif';
// 样式
btn.style.paddingRight = '10px';
// 文本
span.innerHTML = '您真的要GG吗？';
//在容器元素中放入其他元素
dialog.appendChild(img);
dialog.appendChild(btn);
dialog.appendChild(span);

使用HTML5 template标签

<template id="dialog_tpl"> 
  <div class="dialog"> 
    <img src="" alt=""> 
    <input type="button" value="确认"> <span></span> 
  </div>
</template>

//使用textarea包裹
var dialog = document.querySelector('#dialog_tpl');
dialog.content.querySelector('img').src = 'close.gif';
dialog.content.querySelector('span').innerHTML = '您真的要GG吗？';
document.body.appendChild(dialog.content.cloneNode(true));

不设置为type="text/javascript"的script标签

<script type="text/html" id="theTemplate"> 
 <div class="dialog">
  <div class="title">
     <img src="close.gif" alt="点击可以关闭" />亲爱的提示条
  </div>
  <div class="content">
    <img src="delete.jpg" alt="" /><span>您真的要GG吗？</span>
  </div>
  <div class="bottom">
     <input id="Button2" type="button" value="确定" class="btn"/>  
    <input id="Button3" type="button" value="取消" class="btn"/>
  </div>
 </div>
</script>

//使用script包裹
var template = document.getElementById("theTemplate").innerHTML ;

改写代码：

<div id="container">
    按钮<button class="toggle">展示/隐藏</button>
</div>

window.onload = function() {
  // 使用createElement创建元素
  // modalheader
  var modalHeader = document.createElement('div');
  var modalClose = document.createElement('button');
  var closeContent = document.createElement('span');
  var modalTitle = document.createElement('h4');
  modalHeader.className='modal-header';
  modalClose.className='close';
  modalTitle.className='modal-title';
  closeContent.innerHTML = "&times";
  modalTitle.innerHTML = "这是一个浮出层";
  modalClose.appendChild(closeContent);
  modalHeader.appendChild(modalClose);
  modalHeader.appendChild(modalTitle);
  // modalbody
  var modalBody = document.createElement('div');
  var modalBodyContent = document.createElement('p');
  modalBody.className='modal-body';
  modalBodyContent.innerHTML = "这是一个浮出层";
  modalBody.appendChild(modalBodyContent);
  // modalfooter
  var modalFooter = document.createElement('div');
  var modalFunc = document.createElement('button');
  var modalCancel = document.createElement('button');
  modalFooter.className='modal-footer';
  modalFunc.className='btn btn-primary modal-func';
  modalCancel.className='btn btn-defalut modal-cancel';
  modalFunc.innerHTML = "确定";
  modalCancel.innerHTML = "取消";
  modalFooter.appendChild(modalFunc);
  modalFooter.appendChild(modalCancel);
  //modal-dialog
  var modalDialog = document.createElement('div');
  modalDialog.className = 'modal-dialog';
  modalDialog.appendChild(modalHeader);
  modalDialog.appendChild(modalBody);
  modalDialog.appendChild(modalFooter);
  //modal-content
  var modalContent = document.createElement('div');
  modalContent.className = 'modal-content';
  modalContent.appendChild(modalDialog);
  //modal
  var modal = document.createElement('div');
  var overlayMask = document.createElement('div');
  modal.id='modal';
  modal.className='modal hide';
  overlayMask.className='overlay-mask';
  overlayMask.id='overlay-mask';
  modal.appendChild(overlayMask);
  modal.appendChild(modalContent);

  document.getElementById("container").appendChild(modal);
  console.log(document.getElementById("container"));


  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() {
        console.log('show');
        if (modal.className.indexOf('hide')) {
          modal.className = 'modal';
        } else {
          modal.className = 'modal hide';
        }
      },
      init: function() {
        var that = this;
        //写入配置
        modalTitle.innerText = that.modalConfig.title;
        modalBody.innerText = that.modalConfig.content;
        modalTitle.innerText = that.modalConfig.title;

        //监听事件
        document.querySelector('.toggle').addEventListener('click', function() {
          that.toggle();
        }, false);

        overlayMask.addEventListener('click', function(){
           modal.className = 'modal hide';
         }, false);

        //取消事件
        modalCancel.addEventListener('click', function() {
          modal.className = 'modal hide';
        }, false);

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

      }
    }
    return modalBox.init();
  }
}

jquery改写

$(document).ready(function(){
  var data = {
    title: '标题',
    content: '内容',
    type: 'default',
    func: function() {
      console.log("2333");
    }
  };

  var modalHeader = $("<div class='modal-header'></div>");
  var modelCloseContent = $("<span aria-hidden='true'></span>").text("×");
  var modalClose = $("<button type='button' class='close'></button>").append(modelCloseContent);
  var modalTitle = $("<h4 class='modal-title'></h4>").text("这是一个浮出层");
  modalHeader.append(modalClose, modalTitle);
  // modalbody
  var modalBody = $("<div class='modal-body'></div>");
  var modalBodyContent = $("<p></p>").text("这是一个浮出层");
  modalBody.append(modalBodyContent);
  // modalfooter
  var modalFooter = $("<div class='modal-footer'></div>");
  var modalFunc = $("<button type='button' class='btn btn-primary modal-func'></button>").text("确定");
  var modalCancel = $("<button type='button' class='btn btn-default modal-cancel'></button>").text("取消");
  modalFooter.append(modalFunc, modalCancel);
  //modal-dialog
  var modalDialog = $("<div class='modal-dialog'></div>");
  modalDialog.append(modalHeader, modalBody, modalFooter);
  //modal-content
  var modalContent = $("<div class='modal-content'></div>");
  modalContent.append(modalDialog);
  //modal
  var modal = $("<div class='modal' id='modal'></div>");
  var overlayMask = $("<div class='overlay-mask' id='overlay-mask'></div>");
  modal.append(overlayMask, modalContent);

  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, // 其他处理方法
      },
      init: function(){
          var that = this;
          //创建dom
          $("#container").append(modal);
          //写入配置
          $(".modal-title").text(that.modalConfig.title);
          $(".modal-body").text(that.modalConfig.content);
          $("#modal").hide();
          //监听事件
          $(".toggle").click(function() {
            $("#modal").toggle();
          });
          //遮罩层隐藏
          $("#overlay-mask").click(function() {
            $("#modal").hide();
          });
          //关闭事件
          $(".close").click(function(){
            $("#modal").hide();
          });
          //确定事件
          $(".modal-func").click(function(){
            if(that.modalConfig.func == 0){
              $("#modal").hide();
            }else {
              that.modalConfig.func();
              $("#modal").hide();
            }
          });
          //取消事件
          $(".modal-cancel").click(function() {
            $("#modal").hide();
          });
      }
     }
    return modalBox.init();
  }
})

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
}