實現H5手機頁面的預覽效果

一、css

div.preview-layer{
    display: none;
    position: relative;
    left:50%;
    margin-left:-205px;
}
div.preview-layer .preview-bg{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index:999;     
    background-color:#000; 
    opacity:0.7;  
}

.preview-close{
    position: fixed;
    width: 20px;
    height: 10px; 
    color:#fff; 
    cursor:pointer;
    z-index:1000;
    top:50%;
    left:50%;
    margin-left:220px;
 
}

div.preview-layer .preview-phone{
    position: fixed;
    width: 410px;
    height: 840px;
    background: url(../images/iphone-bg.png) no-repeat no-repeat;
    z-index: 1000;
}

.preview-html{
    position: absolute;
    width:361px !important;
    height: 638px !important;
    top:98px;
    left:24px;
    border:2px solid #000;
    border-radius: 5px;
    outline: none;
    background-color: #fff;
}

 

---

二、html

<!-- /.main-container -->
     <div class="preview-layer">
                     <div class="preview-bg"></div>
                     <div class="preview-phone">
                     <div class="preview-close" οnclick="previewclose();">關閉預覽</div>
                     <iframe id="preview-html" name="preview-html" class="preview-html" src=""></iframe>
                     </div>
    </div>

---

三、JS

//預覽
       function preview(ID){
            var murl = '<%=basePath%>wxwebindex/previewcourseware.do?ID='+ID;
             if(ID=='' || ID==null){
                alert("請先保存信息!");
               }
               else{        
            $("#preview-html").attr('src', murl);
            $("#zhongxin").hide();
            $(".preview-layer").css('display','block');
              }  
        }
               //關閉預覽
       function previewclose(){
          $(".preview-layer").css('display','none');
          $("#zhongxin").show();         
           }

效果：