<!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>
如何讓彈出的DIV層有頂部到中間的移動和透明樣式？
66_
2015-08-10 14:03:55
