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