移动端重构系列11-popup

popup分为两种：一种是内容比较多，直接以全屏显示，如图一；一种是少量内容的popup提示，如图二

查看效果有：http://jsbin.com/retag/2/

 

popup page

设计结构：

<header class="header"></header>
<div class="wrap-page">
    <section class="page"></section>
    ...
</div>
<footer class="footer"></footer>
<section class="popup-page">
    <div class="popup-hd"><span class="btn-close"></span></div>
    <div class="popup-bd"></div>
</section>

因为这种形式内容可能会比较长，有可能会有滚动效果，所以头部（含有关闭按钮）采用固定，动画设计使用translate偏移和opacity来搞定，这里用的是从下面进入视觉范围。通过添加删除active这个class来控制元素显示隐藏，

popup over

设计结构为：

<header class="header"></header>
<div class="wrap-page">
    <section class="page"></section>
    ...
</div>
<footer class="footer"></footer>
<div class="overlay"><section class="popup-over"></section></div>

这种的首先得计算定位，这次动画采用scale和opacity来搞定，同样通过添加删除active这个class来控制元素显示隐藏

 

其中，HTML结构为：

<header id="header" class="header">
              <h1 class="page-title">popup 测试</h1>
      </header>
      <div id="main" class="wrap-page">
           <section class="page">
                    <p><span class="popup-page-link test-link" data-popup-page="popup-page-test">点击测试 popup page</span></p>
                    <p><span class="popup-over-link test-link" data-popup-over="popup-over-test">点击测试 popup over</span></p>    
                    <p>君子曰：学不可以已。</p>
                    <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
                    <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>
                    <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>
                    <p>君子曰：学不可以已。</p>
                    <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
                    <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>
                    <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>
                    <p>君子曰：学不可以已。</p>
                    <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
                    <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>
                    <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>
            </section>
       </div>
       <div class="overlay" id="overlay">    
            <section class="popup-over popup-over-test">
            <p>popup over</p>  
            <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
            </section>
       </div>
       <section class="popup-page popup-page-test">
               <div class="popup-hd">劝学<span class="btn-close">×</span></div>
               <div class="popup-bd">
                    <p></p>
                </div>
        </section>
  <script>
      $(function(){
          //pop over
          var $overlay=$('#overlay');
          function modalHidden($ele){
             $ele.removeClass('active');
             $ele.one('transitionend',function(){
                 $ele.css("display","none");
                 $overlay.removeClass("active");
             });
          }
          $('.popup-over-link').tap(function(){
             var $that=$(this),offset=$that.offset();
             $overlay.addClass('active');
             var $whichPopup=$('.'+$(this).data('popup-over'));
             $whichPopup.animate({"display":"block","left":offset.left+30,"top":offset.top+50},100,function(){
               $(this).addClass('active');
             });
             $overlay.tap(function(){
                modalHidden($whichPopup);
             });
             $whichPopup.tap(function(e){
                e.stopPropagation();
             });
          });
          //pop page
          $('.popup-page-link').tap(function(){
             var $that=$(this);
             var $whichPopup=$('.'+$(this).data('popup-page'));
             $whichPopup.addClass('active');
             $('.btn-close').tap(function(){
                 $whichPopup.removeClass('active');
             });
          });
      });
  </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:0; overflow-y:auto;-webkit-overflow-scrolling:touch;}
.page{ position:relative; padding:10px;}
.page p{ margin-bottom:10px;}
.test-link{ background:#f00; color:#fff; padding:10px; border-radius:3px; display:inline-block; cursor:pointer;}
.overlay{ display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; position:fixed; top:0; right:0; bottom:0; left:0; z-index:-1; background-color:rgba(0,0,0,0.8);-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;}
.overlay.active{ z-index:980;}
.popup-over{ background-color:#fff; border-radius:8px; position:absolute; left:0; top:0; width:200px; padding:10px; z-index:985; opacity:0;-webkit-transform:translate3d(0,0,0) scale(0.815);transform:translate3d(0,0,0) scale(0.815);-webkit-transition:-webkit-transform 0.3s ease-in-out,opacity 0.3s ease-in-out;transition:transform 0.3s ease-in-out,opacity 0.3s ease-in-out;}
 .popup-over.active{-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);opacity:1;}
 .popup-over::before{ content:''; width:0; height:0; overflow:hidden;}
 .popup-over::before{ border-bottom:10px solid #fff; border-left:10px dashed transparent; border-right:10px dashed transparent; position:absolute; left:50%; top:-10px; margin-left:-10px;}
 .popup-page{ background:#fff; position:fixed; left:0; top:0; bottom:0; right:0; opacity:0; padding-top:35px;-webkit-transition:-webkit-transform 0.3s ease-in-out,opacity 0.3s ease-in-out;transition:transform 0.3s ease-in-out,opacity 0.3s ease-in-out; z-index:985;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);}
 .popup-page.active{ display:block; opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
 .popup-page .popup-hd{ position:absolute; left:0; top:0; right:0; height:35px; line-height:35px; border-bottom:1px solid #f00; padding-left:10px;}
 .popup-page .popup-hd .btn-close{ position:absolute; right:0; top:0; font-size:30px; width:35px; text-align:center; cursor:pointer;}
 .popup-page .popup-hd .btn-close:hover{ background:#f00; color:#fff;}
 .popup-page .popup-bd{ overflow-y:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch; height:100%; padding:10px;}
 .popup-page .popup-bd p{ margin-bottom:10px;}

总结

使用transition动画的时候，在动画开始之前先得确保display为非none状态，然后动画结束之后有个transitionend事件可以调用，demo中的overlay的隐藏就是这个调用了这个事件