JQUERY弹出模式DIV_jquery弹div-优快云博客

本文链接：https://blog.youkuaiyun.com/shanhuhau/article/details/8786488

弹出DIV是采用JQUERY+CSS联合控制的，JQUERY弹出窗口，CSS控制层的显示和效果

页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="script/pop.js"></script>
<link type='text/css' rel='Stylesheet' href='style/pop.css' />
<title>Insert title here</title>
</head>
<body>

	<div id='pop-div' style="width: 300px" class="pop-box">
		<h4 class="pop-boxh4">标题位置</h4>
		<div class="pop-box-body">
			<p>弹出内容</p>
		</div>
		<div id='buttonPanel' style="text-align: right"
			style="text-align:right">
			<input type="button" value="Close" id="btn1"
				οnclick="hideDiv('pop-div');" />
		</div>
	</div>
	<input type="button" value="选择" οnclick="popupDiv('pop-div')"
		style="cursor: pointer;">
</body>
</html>

JS代码

function popupDiv(div_id) {
	// 获取传入的DIV
	var $div_obj = $("#" + div_id);
	// 计算机屏幕高度
	var windowWidth = $(window).width();
	// 计算机屏幕长度
	var windowHeight = $(window).height();
	// 取得传入DIV的高度
	var popupHeight = $div_obj.height();
	// 取得传入DIV的长度
	var popupWidth = $div_obj.width();
	// // 添加并显示遮罩层
	$("<div id='bg'></div>").width(windowWidth * 0.99)
			.height(windowHeight * 0.99).click(function() {
				hideDiv(div_id);
			}).appendTo("body").fadeIn(200);
	// 显示弹出的DIV
	$div_obj.css({
		"position" : "absloute"
	}).animate({
		left : windowWidth / 2 - popupWidth / 2,
		top : windowHeight / 2 - popupHeight / 2,
		opacity : "show"
	}, "slow");
	
}
/*隐藏弹出DIV*/
function hideDiv(div_id) {
	$("#bg").remove();
	$("#" + div_id).animate({
		left : 0,
		top : 0,
		opacity : "hide"
	}, "slow");
}

CSS代码

@CHARSET "UTF-8";
.pop-box-body {
	clear: both;
	margin: 4px;
	padding: 2px;
}

.pop-boxh4{  
color:#FFF;  
cursor:default;  
height:18px;  
font-size:14px;  
font-weight:bold;  
text-align:left;  
padding-left:8px;  
padding-top:4px;  
padding-bottom:2px;  
background:blue;
}

.pop-box {
	/*弹出窗口后，弹出的DIV采用此CSS，保证置于最上层
	  z-index控制Z轴的坐标，数值越大，离用户越近
	*/
	z-index: 9999999; /*这个数值要足够大，才能够显示在最上层*/
	margin-bottom: 3px;
	display: none;
	position: absolute;
	background: gray;
	border: solid1px #6e8bde;
}

#bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	/*弹出窗口后，添加遮罩层，采用此CSS，将该层置于弹出DIV和页面层之间
	  z-index控制Z轴的坐标，数值越大，离用户越近
	*/
	z-index: 5;  
	background: white;
}

工程代码： http://download.youkuaiyun.com/detail/shanhuhau/5245136