点击弹出div层
<%@ 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>演示：JavaScript同时弹出多个DIV窗口层</title>
<style>
div.sample_popup {
z-index: +1;
}
div.menu_form_header {
cursor: move
}
div.sample_popup div.menu_form_header {
border-bottom: 0px;
cursor: default;
cursor: move;
width: 190px;
height: 20px;
line-height: 24px;
vertical-align: middle;
background: #34A2DC;
color: #FFF;
text-decoration: none;
font-weight: 900;
font-size: 13px;
padding-left: 10px;
overflow: hidden;
}
div.sample_popup div.menu_form_body {
border: 3px solid #34A2DC;
width: 194px;
background: #FFF;
font-size: 12px;
}
div.sample_popup img.menu_form_exit {
float: right;
margin: 5px 5px 0px 0px;
cursor: pointer;
}
div.sample_popup form {
margin: 0px;
padding: 8px 10px 10px 10px;
}
.menu_form_body a {
text-decoration: none;
}
</style>
<script type="text/javascript">
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;
function popup_display(x) {
var win = window.open();
for ( var i in x)
win.document.write(i + ' = ' + x[i] + '<br>');
}
// ----- popup_mousedown -------------------------------------------------------
function popup_mousedown(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
if (ie && window.event.button != 1)
return;
if (!ie && e.button != 0)
return;
popup_dragging = true;
popup_target = this['target'];
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
if (ie)
popup_oldfunction = document.onselectstart;
else
popup_oldfunction = document.onmousedown;
if (ie)
document.onselectstart = new Function("return false;");
else
document.onmousedown = new Function("return false;");
}
// ----- popup_mousemove -------------------------------------------------------
function popup_mousemove(e) {
if (!popup_dragging)
return;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
var mouseX = ie ? window.event.clientX : e.clientX;
var mouseY = ie ? window.event.clientY : e.clientY;
//在此修改弹出框相对于浏览器内容器顶部和左边的距离，单位像素---开始
element.style.left = (element.offsetLeft + mouseX - popup_mouseX)
+ 'px';
element.style.top = (element.offsetTop + mouseY - popup_mouseY) + 'px';
//在此修改弹出框相对于浏览器内容器顶部和左边的距离，单位像素---结束
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
}
// ----- popup_mouseup ---------------------------------------------------------
function popup_mouseup(e) {
if (!popup_dragging)
return;
popup_dragging = false;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
if (ie)
document.onselectstart = popup_oldfunction;
else
document.onmousedown = popup_oldfunction;
}
// ----- popup_exit ------------------------------------------------------------
function popup_exit(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
popup_mouseup(e);
element.style.visibility = 'hidden';
element.style.display = 'none';
}
// ----- popup_show ------------------------------------------------------------
function popup_show(id) {
element = document.getElementById('popup' + id);
drag_element = document.getElementById('popup_drag' + id);
exit_element = document.getElementById('popup_exit' + id);
element.style.position = "absolute";
element.style.visibility = "visible";
element.style.display = "block";
element.style.left = (document.documentElement.scrollLeft
+ popup_mouseposX - 10)
+ 'px';
element.style.top = (document.documentElement.scrollTop
+ popup_mouseposY - 10)
+ 'px';
drag_element['target'] = 'popup' + id;
drag_element.onmousedown = popup_mousedown;
exit_element.onclick = popup_exit;
}
// ----- popup_mousepos --------------------------------------------------------
function popup_mousepos(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
popup_mouseposX = ie ? window.event.clientX : e.clientX;
popup_mouseposY = ie ? window.event.clientY : e.clientY;
}
// ----- Attach Events ---------------------------------------------------------
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousedown', popup_mousepos);
else
document.addEventListener('mousedown', popup_mousepos, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousemove', popup_mousemove);
else
document.addEventListener('mousemove', popup_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmouseup', popup_mouseup);
else
document.addEventListener('mouseup', popup_mouseup, false);
</script>
</head>
<body>
<input type="button" onclick="popup_show(1)" value='登录窗口' />
<div class="sample_popup" id="popup1"
style="visibility: hidden; display: none;">
<div class="menu_form_header" id="popup_drag1">
<img class="menu_form_exit" id="popup_exit1" src="" />
登陆窗口
</div>
<div class="menu_form_body">
<form method="post" action="">
<div>
姓名：<input type="text" class="input_yd" name="username" />
</div>
<div>
密码：<input type="text" name="password" />
</div>
<div>
这里的内容可以自由编辑 <input type="submit" value="确定" />
</form>
</div>
</div>
</div>
<input type="button" onclick="popup_show(2)" value='注册窗口' />
<div class="sample_popup" id="popup2"
style="visibility: hidden; display: none;">
<div class="menu_form_header" id="popup_drag2">
<img class="menu_form_exit" id="popup_exit2" src="" />
注册窗口
</div>
<div class="menu_form_body">
<form method="post" action="">
<div>
您的姓名：<input type="text" class="input_yd" name="username" />
</div>
<div>
您的密码：<input type="text" name="password" />
</div>
<div>
E-mail：<input type="text" name="e-mail" />
</div>
<div>
这里的内容可以自由编辑 <input type="submit" value="注册" />
</form>
</div>
</div>
</div>
<input type="button" onclick="popup_show(3)" value='提示窗口' />
<div class="sample_popup" id="popup3"
style="visibility: hidden; display: none;">
<div class="menu_form_header" id="popup_drag3">
<img class="menu_form_exit" id="popup_exit3" src="" />
提示窗口
</div>
<div class="menu_form_body">
这是提示窗口的正文区域，你可以在这里填写任何内容。<br />代码吾爱：www.code52.net<br />
</div>
</div>
<br />
</body>
</html>
<%
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>演示：JavaScript同时弹出多个DIV窗口层</title>
<style>
div.sample_popup {
z-index: +1;
}
div.menu_form_header {
cursor: move
}
div.sample_popup div.menu_form_header {
border-bottom: 0px;
cursor: default;
cursor: move;
width: 190px;
height: 20px;
line-height: 24px;
vertical-align: middle;
background: #34A2DC;
color: #FFF;
text-decoration: none;
font-weight: 900;
font-size: 13px;
padding-left: 10px;
overflow: hidden;
}
div.sample_popup div.menu_form_body {
border: 3px solid #34A2DC;
width: 194px;
background: #FFF;
font-size: 12px;
}
div.sample_popup img.menu_form_exit {
float: right;
margin: 5px 5px 0px 0px;
cursor: pointer;
}
div.sample_popup form {
margin: 0px;
padding: 8px 10px 10px 10px;
}
.menu_form_body a {
text-decoration: none;
}
</style>
<script type="text/javascript">
var popup_dragging = false;
var popup_target;
var popup_mouseX;
var popup_mouseY;
var popup_mouseposX;
var popup_mouseposY;
var popup_oldfunction;
function popup_display(x) {
var win = window.open();
for ( var i in x)
win.document.write(i + ' = ' + x[i] + '<br>');
}
// ----- popup_mousedown -------------------------------------------------------
function popup_mousedown(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
if (ie && window.event.button != 1)
return;
if (!ie && e.button != 0)
return;
popup_dragging = true;
popup_target = this['target'];
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
if (ie)
popup_oldfunction = document.onselectstart;
else
popup_oldfunction = document.onmousedown;
if (ie)
document.onselectstart = new Function("return false;");
else
document.onmousedown = new Function("return false;");
}
// ----- popup_mousemove -------------------------------------------------------
function popup_mousemove(e) {
if (!popup_dragging)
return;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
var mouseX = ie ? window.event.clientX : e.clientX;
var mouseY = ie ? window.event.clientY : e.clientY;
//在此修改弹出框相对于浏览器内容器顶部和左边的距离，单位像素---开始
element.style.left = (element.offsetLeft + mouseX - popup_mouseX)
+ 'px';
element.style.top = (element.offsetTop + mouseY - popup_mouseY) + 'px';
//在此修改弹出框相对于浏览器内容器顶部和左边的距离，单位像素---结束
popup_mouseX = ie ? window.event.clientX : e.clientX;
popup_mouseY = ie ? window.event.clientY : e.clientY;
}
// ----- popup_mouseup ---------------------------------------------------------
function popup_mouseup(e) {
if (!popup_dragging)
return;
popup_dragging = false;
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
if (ie)
document.onselectstart = popup_oldfunction;
else
document.onmousedown = popup_oldfunction;
}
// ----- popup_exit ------------------------------------------------------------
function popup_exit(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
var element = document.getElementById(popup_target);
popup_mouseup(e);
element.style.visibility = 'hidden';
element.style.display = 'none';
}
// ----- popup_show ------------------------------------------------------------
function popup_show(id) {
element = document.getElementById('popup' + id);
drag_element = document.getElementById('popup_drag' + id);
exit_element = document.getElementById('popup_exit' + id);
element.style.position = "absolute";
element.style.visibility = "visible";
element.style.display = "block";
element.style.left = (document.documentElement.scrollLeft
+ popup_mouseposX - 10)
+ 'px';
element.style.top = (document.documentElement.scrollTop
+ popup_mouseposY - 10)
+ 'px';
drag_element['target'] = 'popup' + id;
drag_element.onmousedown = popup_mousedown;
exit_element.onclick = popup_exit;
}
// ----- popup_mousepos --------------------------------------------------------
function popup_mousepos(e) {
var ie = navigator.appName == "Microsoft Internet Explorer";
popup_mouseposX = ie ? window.event.clientX : e.clientX;
popup_mouseposY = ie ? window.event.clientY : e.clientY;
}
// ----- Attach Events ---------------------------------------------------------
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousedown', popup_mousepos);
else
document.addEventListener('mousedown', popup_mousepos, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmousemove', popup_mousemove);
else
document.addEventListener('mousemove', popup_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer")
document.attachEvent('onmouseup', popup_mouseup);
else
document.addEventListener('mouseup', popup_mouseup, false);
</script>
</head>
<body>
<input type="button" onclick="popup_show(1)" value='登录窗口' />
<div class="sample_popup" id="popup1"
style="visibility: hidden; display: none;">
<div class="menu_form_header" id="popup_drag1">
<img class="menu_form_exit" id="popup_exit1" src="" />
登陆窗口
</div>
<div class="menu_form_body">
<form method="post" action="">
<div>
姓名：<input type="text" class="input_yd" name="username" />
</div>
<div>
密码：<input type="text" name="password" />
</div>
<div>
这里的内容可以自由编辑 <input type="submit" value="确定" />
</form>
</div>
</div>
</div>
<input type="button" onclick="popup_show(2)" value='注册窗口' />
<div class="sample_popup" id="popup2"
style="visibility: hidden; display: none;">
<div class="menu_form_header" id="popup_drag2">
<img class="menu_form_exit" id="popup_exit2" src="" />
注册窗口
</div>
<div class="menu_form_body">
<form method="post" action="">
<div>
您的姓名：<input type="text" class="input_yd" name="username" />
</div>
<div>
您的密码：<input type="text" name="password" />
</div>
<div>
E-mail：<input type="text" name="e-mail" />
</div>
<div>
这里的内容可以自由编辑 <input type="submit" value="注册" />
</form>
</div>
</div>
</div>
<input type="button" onclick="popup_show(3)" value='提示窗口' />
<div class="sample_popup" id="popup3"
style="visibility: hidden; display: none;">
<div class="menu_form_header" id="popup_drag3">
<img class="menu_form_exit" id="popup_exit3" src="" />
提示窗口
</div>
<div class="menu_form_body">
这是提示窗口的正文区域，你可以在这里填写任何内容。<br />代码吾爱：www.code52.net<br />
</div>
</div>
<br />
</body>
</html>