<%@ 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>
分享到：
相关推荐
"地图点击弹出div层"这个主题涉及到地图交互设计，特别是在Web开发中如何实现用户与地图的互动功能。下面将详细阐述这一技术及其相关的知识点。 首先，我们要理解地图的基础。地图通常由地图服务提供商提供，如百度...
alert功能的扩展版，可以弹出一个以DIV层中元素代码为内容的提示窗口，也可以直接弹出文字信息。 提供了两个JS方法： （1）showAlert(info); 函数说明：info参数可以是字符串信息，也可以是html元素代码。 （2）...
点击文字弹出一个DIV层窗口代码,下载就能用
在ASP.NET开发中，"NET弹出层弹出div"是一种常见的交互设计，它允许用户在不离开当前页面的情况下与一些额外的信息或功能进行交互。弹出层通常用于显示详细信息、表单输入、警告消息等，提高了用户体验，因为它们不...
在本实例中，我们将深入探讨如何使用JavaScript来创建一个弹出DIV层窗口。 首先，我们需要了解HTML结构。`index.htm`和`test.html`文件可能包含了用于展示弹出窗口的基础HTML元素。通常，一个基本的HTML结构会包括...
在页面加载后或者点击页面的某个链接时弹出一个div层，同时页面的其他地方会变灰
首先，文档标题"js点击弹出div层实现可拖曳的弹窗效果"已经非常明确地描述了需要实现的功能。简单来说，这是一个由用户点击触发的事件，随后会弹出一个HTML div元素，该元素不仅能够被显示出来，还允许用户通过鼠标...
在网页设计和开发中，创建一个可拖动的弹出div层是非常常见且实用的技术，尤其是在构建用户交互界面时。标题“弹出div拖动层”所指的就是这样一个功能，它允许用户通过鼠标来移动一个浮层div，这种功能常见于对话框...
在网页设计和开发中，"点击弹出浮动层 弹出遮罩层"是一种常见的交互效果，用于增强用户体验。这种效果通常应用于需要显示详细信息、模态对话框或菜单等场景，用户点击某一元素后，一个半透明的遮罩层会覆盖整个页面...
首先，`DIV弹出层`是指一个可以隐藏或显示的独立区域，当用户触发特定事件（如点击按钮）时，该区域会从页面的某个位置滑出。实现这个效果通常需要结合CSS和JavaScript。CSS用于定义`DIV`的样式，包括初始的隐藏状态...
在网页设计中，"弹出div层"是一个常见的交互元素，用于显示通知、表单、消息或其他内容。这种设计技术可以提升用户体验，因为它允许在不离开当前页面的情况下展示额外信息。"Test"这个标题暗示我们将探讨一个关于弹...
超简单弹出DIV层,一个js function 就可完成.无需要另外代码. 你可以进行展示,结合Ajax等
8. **点击穿透**：为了避免弹出层下方的元素仍然可点击，可以设置`pointer-events: none;`在不需要交互的元素上，然后在弹出层上设置`pointer-events: auto;`。 通过上述方法，我们可以有效地解决`div`弹出层的定位...
这就是"Javascript实现弹出DIV层并锁屏"所涉及的主要内容。 首先，让我们了解一下什么是DIV。在HTML中，`<div>`元素是“division”的缩写，用于对网页内容进行区域划分。通过CSS样式，我们可以对这些DIV进行定位、...
在网页设计中，创建一个点击弹出的div圆角遮罩层是常见的交互效果，它通常用于展示模态对话框、提示信息或者...通过这些步骤，我们可以创建一个具有实用性和美观性的点击弹出div圆角遮罩层，为用户提供良好的交互体验。
网页弹出div层的技术在网页开发中非常常见，主要用于创建模态对话框、提示信息或者加载新内容。这种技术利用JavaScript进行实现，结合HTML和CSS，可以为用户提供丰富的交互体验。下面将详细介绍如何使用js-...
在给定的标题和描述中提到的"弹出DIV层窗口"是指使用HTML、CSS和JavaScript实现的浮动窗口效果。这种技术常用于创建模态对话框或轻量级的弹出窗口。 首先，让我们深入理解HTML部分： ```html <!DOCTYPE ...
**jQuery弹出div层窗口** 在网页开发中，jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用...
JS弹出DIV浮层.
2. **CSS样式**：为了使`div`看起来像一个弹出层，我们需要添加相应的CSS样式，如定位、背景色、边框等。这里我们使用`hidden`类来隐藏`div`，并用JavaScript控制其显示和隐藏。 ```css #custom-alert { position:...