<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="JS/JavaScript/jquery-1.7.2.min.js"></script>
<style type="text/css">
.Calculator_box-opened {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
overflow-y: visible;
display: none;
background-color: #000;
opacity: 0.8;
filter: alpha(Opacity=80, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100);
z-index: 1099;
}
.Calculator_box {
padding: 0px;
width: 520px;
margin: 100px auto;
text-align:center;
background-color: #FFF;
position: relative;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var speed = 600;//动画速度
$("#dj").click(function (event) {//绑定事件处理
event.stopPropagation();
$("#Calculator").show(speed);//动画显示
});
//单击除空白区域外的空白区域就隐藏
$(document).click(function () {
if (!$(event.srcElement).is(".Calculator_box,.Calculator_box *")) {
$("#Calculator").hide(speed);
}
});
});
</script>
</head>
<body>
<input type="button" value="点击我弹出层吧" id="dj" />
<div class="Calculator_box-opened" id="Calculator">
<div class="Calculator_box">
<span style="color:red; font-size:16px">大家好，我是弹出层哟！</span>
</div>
</div>
</body>
</html>
简单示例比较容易懂！
时间： 2024-10-09 10:29:51