jquery弹出层

最新推荐文章于 2023-07-10 17:07:54 发布

cenhonggang86

最新推荐文章于 2023-07-10 17:07:54 发布

阅读量122

点赞数

分类专栏： Java 文章标签： jQuery webkit JavaScript CSS JSP ViewUI

本文链接：https://blog.csdn.net/cenhonggang86/article/details/83848663

版权

Java 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css"> 
 
#dialog-overlay {
	width:100%; 
	height:100%;
	filter:alpha(opacity=50); 
	-moz-opacity:0.5; 
	-khtml-opacity: 0.5; 
	opacity: 0.5; 
	background:#00FFFF; 
	position:absolute; 
	top:0; left:0; 
	z-index:3000; 
	display:none;
}
#dialog-box {
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	background:#ffffff;
	width:328px;
	height:200px;
	position:absolute; 
	z-index:5000;
	display:none;
}
</style>
 
<script type="text/javascript"> 
function popup() {
	var maskHeight = $(document).height();  
	var maskWidth = $(window).width();
	var dialogTop =  (maskHeight/2) - ($('#dialog-box').height()/2);  
	var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
	$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
	$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
}

function closeDiv(){
	$('#dialog-overlay').hide();
	$('#dialog-box').hide();
}
 
</script>
 
</head>
<body >
 
<a href="javascript:popup()">Popup!</a>
 
<div id="dialog-overlay"></div>
<div id="dialog-box">
	<div class="dialog-content">
		<a href="#" class="button" οnclick="closeDiv();">Close</a>
	</div>
</div>

</body>

</html>