一、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

<div>

<div></div>

<div>

<div οnclick="previewclose();">關閉預覽</div>

<iframe name="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();

}