内容比较多的时候可以全屏显示，用第一种实现方式，如图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">×</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 overvar $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