自定义html结构的模态对话框

用popover改造实现：

• 样式部分：

  <style type="text/css">  
  .mui-popover{  
      display: none;  
      position: fixed;  
      width: 80%;  
      height: auto;  
      border-radius: 0;  
      left: 50%;  
      top: 50%;  
      margin: 0 auto;  
      z-index: 9999;  
      background-color: #fff;  
      -webkit-transform: translateX(-50%) translateY(-50%);  
      -moz-transform: translateX(-50%) translateY(-50%);  
      -ms-transform: translateX(-50%) translateY(-50%);  
      transform: translateX(-50%) translateY(-50%);  
  }  
  .mui-popover-arrow{  
      display: none;  
  }  
  </style>

• 逻辑封装：

  /**  
  * 自定义弹出层  
  * @param {Object} opt  
  */  
  var popover = function(opt) {  
  var el;  
  if(typeof opt === 'object'){  
      el = document.querySelector(opt.el);  
      if(opt.style) {  
          el.setAttribute('style', opt.style);  
      }  
  }else{  
      el = document.querySelector(opt);  
  }  
  
  var mask = mui.createMask(function() {  
      el.classList.remove('mui-active');  
  });  
  
  this.open = function() {  
      mask.show();  
      el.classList.add('mui-active');  
  }  
  
  this.close = function() {  
      mask.close();  
      el.classList.remove('mui-active');  
  }  
  }

调用：

<div id="pop" class="mui-popover">  
    <ul class="mui-table-view">  
        <li class="mui-table-view-cell"><a href="#">Item1</a></li>  
        <li class="mui-table-view-cell"><a href="#">Item2</a></li>  
        <li class="mui-table-view-cell"><a href="#">Item3</a></li>  
        <li class="mui-table-view-cell"><a href="#">Item4</a></li>  
        <li class="mui-table-view-cell"><a href="#">Item5</a></li>  
    </ul>  
</div>  

<div class="mui-content mui-content-padded">  
    <button id="openPopover" type="button" class="mui-btn mui-btn-blue mui-btn-block">打开弹出菜单</button>  
</div>  

<script src="./js/mui.js"></script>  
<script src="./js/popover.js"></script>  
<script type="text/javascript">       
    var pop = new popover('#pop');  
    document.querySelector('#openPopover').addEventListener('tap',function () {  
        pop.open();  
    })  

    mui('.mui-table-view').on('tap','li a',function(){  
        mui.toast(this.innerHTML);  
        pop.close();  
    })   
</script>

预览地址：demo

正是我需，如果官方将这个组件化就好了，写个html结构然后通过js简单设置渲染进行最好了，大家方便使用