js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 { -webkit-box-shadow: 3px 3px 3px; -moz-box-shadow: 3px 3px 3px; box-shadow: 3px 3px 3px; } .box-shadow-2 { -webkit-box-shadow: 0 0 10px #0CC; -moz-box-shadow: 0 0 10px #0CC; box-shadow: 0 0 10px #0CC; } .box-shadow-3 { -webkit-box-shadow: 0 0 10px rgba(0, 204, 204, .5); -moz-box-shadow: 0 0 10px rgba(0, 204, 204, .5); box-shadow: 0 0 10px rgba(0, 204, 204, .5); } .box-shadow-4 { -webkit-box-shadow: 0 0 10px 15px #0CC; -moz-box-shadow: 0 0 10px 15px #0CC; box-shadow: 0 0 10px 15px #0CC; } .box-shadow-5 { -webkit-box-shadow: inset 0 0 10px #0CC; -moz-box-shadow: inset 0 0 10px #0CC; box-shadow: inset 0 0 10px #0CC; } .box-shadow-6 { box-shadow: -10px 0 10px red, /*左边阴影*/ 10px 0 10px yellow, /*右边阴影*/ 0 -10px 10px blue, /*顶部阴影*/ 0 10px 10px green; /*底边阴影*/ } .box-shadow-7 { box-shadow: 0 0 10px 5px black, 0 0 10px 20px red; } .box-shadow-8 { box-shadow: 0 0 10px 20px red, 0 0 10px 5px black; } .box-shadow-9 { box-shadow: 0 0 0 1px red; } .obj { width: 100px; height: 100px; margin: 50px auto; background: #eee; } .outer { width: 100px; height: 100px; border: 1px solid red; } .inner { width: 60px; height: 60px; background-color: red; -webkit-box-shadow: 50px 50px blue; -moz-box-shadow: 50px 50px blue; box-shadow: 50px 50px blue; } </style> <script type="text/javascript"> /* * 弹出DIV层1 */ function Ceng() { document.getElementById('ceng').style.display = 'block'; document.getElementById('close').style.display = 'block'; return false; } function closeCeng() { document.getElementById('ceng').style.display = 'none'; document.getElementById('close').style.display = 'none'; return false; } /* * 弹出DIV层2 */ function showDiv() { var Idiv = document.getElementById("Idiv"); var mou_head = document.getElementById('mou_head'); Idiv.style.display = "block"; //以下部分要将弹出层居中显示 Idiv.style.left = (document.documentElement.clientWidth - Idiv.clientWidth) / 2 + document.documentElement.scrollLeft + "px"; Idiv.style.top = (document.documentElement.clientHeight - Idiv.clientHeight) / 2 + document.documentElement.scrollTop - 50 + "px"; //以下部分使整个页面至灰不可点击 var procbg = document.createElement("div"); //首先创建一个div procbg.setAttribute("id", "mybg"); //定义该div的id procbg.style.background = "#000000"; procbg.style.width = "100%"; procbg.style.height = "100%"; procbg.style.position = "fixed"; procbg.style.top = "0"; procbg.style.left = "0"; procbg.style.zIndex = "500"; procbg.style.opacity = "0.6"; procbg.style.filter = "Alpha(opacity=70)"; //背景层加入页面 document.body.appendChild(procbg); document.body.style.overflow = "hidden"; //取消滚动条 //以下部分实现弹出层的拖拽效果 var posX; var posY; mou_head.onmousedown = function (e) { if (!e) e = window.event; //IE posX = e.clientX - parseInt(Idiv.style.left); posY = e.clientY - parseInt(Idiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function () { document.onmousemove = null; } function mousemove(ev) { if (ev == null) ev = window.event;//IE Idiv.style.left = (ev.clientX - posX) + "px"; Idiv.style.top = (ev.clientY - posY) + "px"; } } function closeDiv() //关闭弹出层 { var Idiv = document.getElementById("Idiv"); Idiv.style.display = "none"; document.body.style.overflow = "auto"; //恢复页面滚动条 var body = document.getElementsByTagName("body"); var mybg = document.getElementById("mybg"); body[0].removeChild(mybg); } </script> </head> <body> <!--弹出层开始1--> <a href="#" onclick="Ceng()">点击弹出1</a> <div id="ceng" style="position:absolute;z-index:2;left:0;top:0;right:0;background-color:#000;filter:alpha(opacity=50);margin:1px 1px;display:none;width:100%;height:100%;text-align:center;"> </div> <div id="close" style="position:absolute !important;left:30%;top:0px;z-index:3;border:1px solid #ff6600;background-color:#fff;margin:100px auto;padding:0px;display:none;width:400px;height:300px;text-align:right"> <a href="#" onclick="closeCeng()">关闭</a> <div style="text-align:center;"><br> <br> <a href="#">点击查看 >></a></div> </div> <!--结束--> <!--弹出层开始2--> <a href="#" onclick="Ceng()">点击弹出2</a> <div id="Idiv" style="display:none; position:absolute; z-index:1000; background:#67a3d9;"> <div id="mou_head" style="width:100px; height:10px;z-index:1001; position:absolute;">这个是用来实现拖层</div> <input type="button" value="关闭" onclick="closeDiv();" /> </div> <!--结束--> <!--阴影边框效果--> <div class="obj box-shadow-1"></div> <div class="outer"> <div class="inner"></div> </div> <div class="obj box-shadow-2" ></div> <div class="obj box-shadow-3" ></div> <div class="obj box-shadow-4" ></div> <div class="obj box-shadow-5" ></div> <div class="obj box-shadow-6" ></div> <div class="obj box-shadow-7" ></div> <div class="obj box-shadow-8" ></div> <div class="obj box-shadow-9" ></div> <script type="text/javascript"> $(document).ready(function () { if ($.browser.msie) { $('.obj').boxShadow(-10, -10, 5, "#0cc"); //obj元素使用了box-shadow } }); </script> </body> </html>
遮罩层
<style type="text/css"> #zzc_bg { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.7; opacity: .70; filter: alpha(opacity=70); } #zzc_show { display: none; position: absolute; top: 38%; left: 45%; width: 53%; z-index: 1002; } #zzc_show span { font-size: 35px; font-weight: bold; color: White; } #zzc_show img { width: 50px; height: 50px; } </style> <div id="zzc_bg"> </div> <div id="zzc_show"> <span>98%</span> <img src="../images/yuya_load.gif" /> </div> <script type="text/javascript" language="javascript"> var zzc_div = { showdiv: function () { document.getElementById("zzc_bg").style.height = window.screen.availHeight > document.body.clientHeight ? window.screen.availHeight : document.body.clientHeight; document.getElementById("zzc_bg").style.display = "block";
document.getElementById("zzc_show").style.top = (document.documentElement.scrollTop + 170) + "px"; document.getElementById("zzc_show").style.display = "block"; }, hidediv: function hidediv() { document.getElementById("zzc_bg").style.display = 'none'; document.getElementById("zzc_show").style.display = 'none'; } } </script>
