<html>
<head>
<style>
div.titleBar{background: #2279F3;margin: 0px auto;width: 100%;height: 21px;border: #0000FF solid 1px;}
div.closeButton{float: right;}
div.mainBody{margin: auto;}
#divModalDialog{border:solid 1px;background:white;POSITION: absolute;left:0px;top:0px;DISPLAY: none;z-index:2;height:200px;WIDTH: 350px;}
#divModal{BACKGROUND-COLOR:#ECE9D8; FILTER: alpha(opacity=50);opacity: 0.5; LEFT: 0px; POSITION:absolute; TOP: 0px}
</style>
<script>
function showModel()
{
divModalDialog.style.display = "block";
resizeModal();
window.onresize = resizeModal;
doSelect("hidden");
}
function closeModel()
{
divModal.style.width = "0px";
divModal.style.height = "0px";
divModalDialog.style.display = "none";
window.onresize = null;
doSelect("visible");
}
function doSelect(status)
{
var allObj=document.getElementsByTagName( "select");
for(i=0;i<allObj.length;i++){
if(allObj.getAttribute("hide")!="true"){
allObj.style.visibility=status;
}
}
}
function resizeModal()
{
divModal.style.width = document.body.scrollWidth;
divModal.style.height = document.body.scrollHeight;
divModalDialog.style.left = ((document.body.offsetWidth - divModalDialog.offsetWidth) / 2);
divModalDialog.style.top = ((document.body.offsetHeight - divModalDialog.offsetHeight) / 2);
}
var mouseOffset = null;
var iMouseDown = false;
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
if(iMouseDown){
divModalDialog.style.left = mousePos.x-mouseOffset.x;
divModalDialog.style.top = mousePos.y-mouseOffset.y;
}
}
function mouseUp(ev){
iMouseDown = false;
}
function mouseDown(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.getAttribute("id") == "title"){
iMouseDown = true;
mouseOffset = getMouseOffset(target,ev);
}
}
function mouseCoords(ev) {
if(ev.pageX || ev.pageY) {
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function getMouseOffset(target, ev) {
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y} ;
}
function getPosition(e) {
var left = 0;
var top = 0;
while (e.offsetParent) {
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top} ;
}
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
</script>
</head>
<body>
<input type="button" value="点击这里" onclick="showModel()" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<select><option>a</option><option>b</option></select>
<!-- 由于div遮不住select，所以我在现实对话框的时候，吧所有的select都隐藏了，关闭的时候在显示出来 -->
<!-- 如果你有本就要一直隐藏的select，这时也会在关闭对话框时显示出来。-->
<!-- 你可给他加hide="true"属性来使他一直保持隐藏状态 就像下面这个一样-->
<select hide="true" style="visibility:hidden"><option>a</option><option>b</option></select>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input >
<!-- 透明遮罩 -->
<DIV id="divModal"></div>
<!-- 透明遮罩 end -->
<!-- 模态窗口 -->
<DIV id="divModalDialog" >
<div class="titleBar" id="title">
<div class="closeButton"><a href="javascript:closeModel();">[X]</a></div>
</div>
<div class="mainBody">
在这里添加内容
</div>
</DIV><!-- 模态窗口 end -->
</body>
</html>
分享到：
相关推荐
这个名为"mode_window"的压缩包可能包含了上述所有资源，包括HTML、CSS和JavaScript文件，用于构建和演示这个简单的JavaScript模态弹出窗口。通过学习和理解这些文件，开发者可以了解如何在自己的项目中实现类似的...
3. 使用JQuery编写JavaScript代码，实现模态窗口的显示和隐藏。 ```javascript $(document).ready(function() { $("#openModal").on('click', function() { $("#modal").addClass('fadeIn').delay(500).queue...
本教程将深入探讨如何使用JavaScript库JQuery来创建一个可移动的模态窗口。 首先，我们需要了解JQuery的基本用法。JQuery是一个高效、简洁的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在实现可...
从压缩包子文件的文件名称“DIV模态层(可移动)”来看，这可能是一个HTML文件或者包含HTML、CSS和JavaScript代码的文件夹，用于实现可拖动的模态层效果。通常，这样的实现会包括以下几个关键点： 1. HTML结构：HTML...
在JavaScript的世界里，实现图表和模态窗口是两个常见的任务，它们在网页交互和数据可视化中扮演着重要的角色。下面将分别对这两个知识点进行详细阐述。 首先，让我们深入了解一下**js实现图表**。在Web开发中，...
在本示例中，“bootstrapTable-model模态框可拖动代码.zip”包含了一个实现BootstrapTable模态框可拖动功能的代码示例。 BootstrapTable的模态框（Modal）是通过HTML、CSS和JavaScript构建的，它提供了一种优雅的...
在本"JS可拖动模态框.zip"压缩包中，包含了一个使用JavaScript实现的可拖动模态框的实例。模态框（Modal Box）是一种常见的用户界面元素，它会在当前页面上显示一个弹出窗口，使得用户必须与其交互后才能继续浏览...
本文将深入探讨“可拖拽的谷歌样式纯javascript模态窗口插件”的相关知识点。 首先，让我们了解什么是模态窗口。模态窗口（Modal Window）在网页上表现为一个覆盖在主页面上的半透明层，通常包含一些特定的信息或...
本篇将详细介绍如何实现一个具有Bootstrap样式的、在特定区域内可拖拽的非模态窗口，并讨论相关的JavaScript技术。 首先，让我们理解"非模态窗口"（Non-modal window）的概念。与传统的模态对话框不同，非模态窗口...
JavaScript模态对话框是一种在网页中常用的设计元素，它用于向用户显示临时信息或需要用户交互的任务，如确认操作、输入数据等。本教程将深入探讨如何创建一个具有拖拽功能和动画效果的模态对话框，这在现代网页开发...
总之，`lhgdialog`是一个强大的JavaScript模态对话框插件，它提供的丰富功能和良好的可定制性使其成为开发者在构建Web应用时的理想选择。通过深入学习和实践，你可以熟练掌握其用法，提升你的前端开发技能。
tingle.js是一款专门为网页开发设计的轻量级模态窗口插件，它完全基于JavaScript编写，无需依赖其他大型库如jQuery，使得它在性能和加载速度上有一定的优势。这款插件的设计理念是简洁且实用，旨在帮助开发者快速、...
2. **基于库和框架**：许多前端库和框架如Bootstrap、jQuery UI等提供了模态窗口的组件，这些组件通常使用CSS和JavaScript实现，并具有良好的跨浏览器兼容性。 3. **自定义实现**：通过HTML、CSS和JavaScript手动...
标题“5个jQuery模态窗口”意味着我们将探讨五种不同的方法或插件，利用jQuery来实现模态窗口效果。这些模态窗口可能具有各自的特性和功能，例如自定义样式、动画效果、交互性等。下面将分别介绍这五个jQuery模态...
3. **JavaScript功能**：JS是实现模态窗口弹出和关闭的核心。你可以通过添加事件监听器来触发模态窗口，比如点击按钮、链接或者其他元素。同时，还需要编写代码来控制模态窗口的显示和隐藏，比如更改`display`属性或...
7. **性能优化**：一个好的模态窗口实现应该考虑性能，例如延迟加载内容，只在需要时渲染模态窗口，以及优化CSS和JavaScript以减少内存占用和提高加载速度。 JSer.modalDialog.js文件是实现这个模态窗口功能的核心...
- JavaScript事件处理：包括鼠标按下（mousedown）、移动（mousemove）和释放（mouseup）事件，用于实现拖动效果。 - DOM操作：通过获取和设置DOM元素的样式属性，来改变窗口的位置和颜色。 - 用户交互：添加关闭...
总结来说，"在VS2005基于Prototype.js的模态弹出窗口"这个主题涵盖了前端开发中的多种技术，包括使用Visual Studio 2005进行项目开发，结合Prototype.js库创建动态效果，以及理解和实现模态弹出窗口的基本机制。...
在本篇内容中，我们将深入探讨如何利用Extjs这一强大的JavaScript框架来实现模态对话框。 Extjs是一个全面的前端UI库，它提供了丰富的组件和布局模式，适用于构建复杂的企业级应用。模态对话框在Extjs中被称作`Ext....