课时9—popup

内容比较多的时候可以全屏显示，用第一种实现方式，如图1

图1

内容较少的话可以使用第二种实现方式如图2：图2

 

具体的实现代码如下：

.header,.footer,.wrap-page{
  position:absolute;
  left:0;
  right:0;
  background-color: #fff;
}
.header,.footer{
  height:44px;
  background-color: #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-color: #f00;
  color:#fff;
  padding: 10px;
  border-radius:3px;
  display: inline-block;
  cursor: pointer;
}
/* overlay */
.overlay,
.modal .modal-ft {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.overlay {
  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 page */
.popup-over::before {
  content: "";
  height: 0;
  width: 0;
  overflow: hidden;
}

.popup-page {
  -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-page .popup-bd {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

.popup-over {
  background-color: #fff;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 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 {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
}
.popup-over::before {
  border-bottom: 10px solid white;
  border-left: 10px dashed transparent;
  border-right: 10px dashed transparent;
  position: absolute;
  left: 50%;
  top: -10px;
  margin-left: -10px;
}
.popup-over::before {
  border-bottom: 10px solid white;
  border-left: 10px dashed transparent;
  border-right: 10px dashed transparent;
  position: absolute;
  left: 50%;
  top: -10px;
  margin-left: -10px;
}

.popup-page {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  background-color: #fff;
  padding-top: 35px;
  z-index: 985;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 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:active, .popup-page .popup-hd .btn-close:hover {
  background-color: #f00;
  color: #fff;
}
.popup-page .popup-bd {
  padding: 10px;
  height: 100%;
}
.popup-page .popup-bd p {
  margin-bottom: 10px;
}

.popup-page.active {
  /* display: block !important; */
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

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>
        </section>
    </div>
  <div class="overlay" id="overlay">    
    <section class="popup-over popup-over-test" style="display:none">
      <p>popup over</p>  
      <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
    </section>
  </div>
  <section class="popup-page popup-page-test">
    <div class="popup-hd">
      劝学<span class="btn-close">&times;</span>
    </div>
    <div class="popup-bd">
      <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
      <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
      <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
      <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
      <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
      <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
      <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
    </div>
  </section>

JavaScript

$(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);
    console.log($(this).data('popup-page'));
    var $whichPopup = $('.'+$(this).data('popup-page'));
    $whichPopup.addClass('active');

    $('.btn-close').tap(function(){
      $whichPopup.removeClass('active');
    });
  });  
});

 

 

总结

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

如需转载，烦请注明出处：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-popup.html