移动端重构系列10-弹窗modal

本系列文章，如果没有特别说明，兼容安卓4.0.4+

       

设计结构如下：

<header class="header"></header>
<div class="wrap-page">
    <section class="page"></section>
    ...
</div>
<footer class="footer"></footer>
<div class="overlay">
    <section class="modal">
        <div class="modal-hd"></div>
        <div class="modal-bd"></div>
        <div class="modal-ft"></div>
    </section>
</div>

对于高大上的移动端来说，都是rgba时代，所以opacity在移动端很少用；既然这个对子元素的影响已经不是问题，那么嵌套关系就可以成立，而且嵌套还有一个非常好的理由，水平垂直居中，flex小指一动即可。而兄弟元素的水平垂直居中就得设置modal的top和left的值为50%，然后再设置translate的x和y方向都-50%所以果断抛弃兄弟元素设计换成嵌套关系。

因为overlay采用了flex布局来控制子元素居中，所以不难呢过采用display为none/block来显示隐藏遮罩层overlay，而是通过z-index的层级来控制，而modal部分通过添加删除modal-in这个class来控制显示隐藏

 

其中头部要增加一个JS：<script src="http://www.w3cplus.com/mcommon/zepto.1.1.3.js"></script>

THML结构为：

<header id="header" class="header">
              <h1 class="page-title">modal 测试</h1>
      </header>
      <div id="main" class="wrap-page">
        <section class="page">
          <p><span class="modal-link" data-modal="modal-test">点击测试 modal</span></p>    
          <p>这里增加内容...</p>
        </section>
    </div>
    <footer class="footer">
            <h1>footer</h1>
    </footer>
    <div class="overlay" id="overlay">
    <section class="modal modal-test" style="display: none;">
      <div class="modal-hd">标题</div>
      <div class="modal-bd">
        <p>1青，取之于蓝，而青于蓝；冰，水为之，而寒于水。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
        <p>2青，取之于蓝，而青于蓝；冰，水为之，而寒于水。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
        <p>3青，取之于蓝，而青于蓝；冰，水为之，而寒于水。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
      </div>
      <div class="modal-ft">
        <span class="btn-modal">确认</span><span class="btn-modal">取消</span>
      </div>
    </section>        
  </div>
  <script>
          $(function(){
            var $overlay=$('#overlay');
            
            function modalHidden($ele){
              $ele.removeClass('modal-in');
              $ele.one('transitionend',function(){
                $ele.css("display","none");
                $overlay.removeClass('active');
              });
            }
            
            $('.modal-link').tap(function(){
              var $that=$(this);
              $overlay.addClass('active');
              var $whichModal=$('.'+$(this).data('modal'));
              $whichModal.animate({"display":"block"},100,function(){
                 $(this).addClass('modal-in');
              });
            
            $('.btn-modal').tap(function(e){
               modalHidden($whichModal);
               e.stopPropagation();
            });
            
            $overlay.tap(function(e){
               if(e.target.classList.contains('overlay')){
                   modalHidden($whichModal);
               }
            });
            });
            
          });
  </script>

CSS样式为：

.header,.footer,.wrap-page{ position:absolute; left:0; right:0; background:#fff;}
.header,.footer{ height:44px; background:#fff; text-align:center; z-index:900; line-height:44px;}
.header{ top:0; border-bottom:1px solid #f00;}
.footer{ bottom:0; border-top:1px solid #f00;}
.page-title{ line-height:44px;}
.fl{ float:left;}.fr{ float:right;}
.wrap-page{ top:44px; bottom:44px; overflow-y:auto;-webkit-overflow-scrolling:touch;}
.page{ position:relative; padding:10px;}
.page p{ margin-bottom:10px;}
.modal-link{ background:#f00; color:#fff; padding:10px; border-radius:3px; display:inline-block; cursor:pointer;}
/**overlay**/
.overlay{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center; position:fixed; left:0; right:0; top:0; bottom:0; background-color:rgba(0,0,0,0.8); z-index:-1;}
.overlay.active{ z-index:980;}
.modal{-webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}
.modal{ background-color:#fff; border-radius:5px; margin:0 10px; overflow:hidden; opacity:0;-webkit-transform:translate3d(0,0,0) scale(0.815);transform:translate3d(0,0,0) scale(0.815);-webkit-transition-property:-webkit-transform,opacity;transition-property:transform,opacity;}
.modal.modal-in{opacity:1; -webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);}
.modal .modal-hd{ text-align:center; line-height:40px; background-color:#0078e7; color:#fff;}
.modal .modal-bd{ padding:15px;}
.modal .modal-ft{ border-top:1px solid #ccc; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex;}
.modal .modal-ft .btn-modal{-webkit-box-flex:1;-ms-flex:1;-webkit-flex:1;flex:1; background-color:#fefefe; text-align:center; line-height:40px; color:#0078e7;}
.modal .modal-ft .btn-modal:first-child{ border-right:1px solid #ccc;}
.modal .modal-ft .btn-modal:last-child{ border-right:none;}
.modal .modal-ft .btn-modal:hover,.modal .modal-ft .btn-modal:active{ background-color:#d9d9d9;}