<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕课网-弹出层</title>
<style type="text/css">
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
top: 200px;
left: 50%;
margin-left: -200px;
width: 320px;
background: #eee url(../img/modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 40px 40px 0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
font-weight:bold;
border-top:solid 5px #FF0;
font-family:Arial;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 24px;
line-height: 1em;
position: absolute;
top: 8px;
right: 11px;
color: #000;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
.modal-ok a{
margin:25px auto;
width:80px;
height:35px;
border:solid 1px #000;
font-family:Arial;
font-size:16px;
text-align:center;
line-height:40px;
border-radius: 5px;
color:#000;
font-weight:bold;
display:block;
}
.modal-ok a:hover{
border:solid 1px #CC0;
color:#CC0;}
<script>
function update(omyjs){
var omyModal=document.createElement("div");
omyModal.id="myModal";
omyModal.innerHTML="<div class='reveal-modal'><div id='modal-p'>!</div><p id='modal-ok' class='modal-ok' ><a href='javascript:;'>OK</a></p><a id='modal-close' class='close-reveal-modal'>×</a></div>";
document.body.appendChild(omyModal);
//添加图层JS
var oModal=document.getElementById("modal-p");
oModal.innerHTML=omyjs;
var oClosem=document.getElementById("modal-close");
var oOkm=document.getElementById("modal-ok");
//点击关闭按钮
oClosem.onclick=oOkm.onclick=function(){
document.body.removeChild(omyModal);
};
};
</script>
</head>
<body>
<bottom onclick="update('怎么才能添加一个显示效果呢？')">
</div>
</body>
</html>
echo_kinchao