首先弹窗的实现效果如下：

主要实现的代码如下：

CSS：

.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;}.modal-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;}.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 #cccccc;}.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 #cccccc;}.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;}

HTML：

     
        
      
modal 测试
    
     
    
     
        
      
          
       
点击测试 modal
                       
       
君子曰：学不可以已。
        
      
    
     
  
     
    
      
      
       
        标题
       
      
       
        
        
1青，取之于蓝，而青于蓝；冰，水为之，而寒于水。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。
        
        
2青，取之于蓝，而青于蓝；冰，水为之，而寒于水。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。
        
        
3青，取之于蓝，而青于蓝；冰，水为之，而寒于水。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。
      
       
      
       
        
        确认
        取消      
       
    
      
          
     

JavaScript：

$(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);      }    });  });  });

总结：

移动端背景透明度使用rgba，遮盖层和弹出层可以设计成嵌套模式。