html代码如下：
<html>
<head>
<title>可拖动DIV</title>
<script type="text/javascript">
function showProc(){
message_box.style.visibility='visible';
//创建灰色背景层
procbg = document.createElement("div");
procbg.setAttribute("id","mybg");
procbg.style.background = "#000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "absolute";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zIndex = "500";
procbg.style.opacity = "0.3";
procbg.style.filter = "Alpha(opacity=30)";
//背景层加入页面
document.body.appendChild(procbg);
document.body.style.overflow = "hidden";
}
//拖动
function drag(obj){
var s = obj.style;
var b = document.body;
var x = event.clientX + b.scrollLeft - s.pixelLeft;
var y = event.clientY + b.scrollTop - s.pixelTop;
var m = function(){
if(event.button == 1){
s.pixelLeft = event.clientX + b.scrollLeft - x;
s.pixelTop = event.clientY + b.scrollTop - y;
}else {
document.detachEvent("onmousemove", m);
}
}
document.attachEvent("onmousemove", m)
if(!this.z)
this.z = 999;
s.zIndex = ++this.z;
event.cancelBubble = true;
}
function closeProc(){
message_box.style.visibility='hidden';
procbg.style.visibility = "hidden";
}
</script>
</head>
<body>
<input type="button" value="弹出可拖动DIV" onclick="showProc();" />
<div id="message_box" style="position:absolute;
left:10%;top:10%;width:80%;height:80%;
filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);
z-index:1000;
visibility:hidden">
<div id= "message" style="border:#036 solid; border-width:1 1 3 1;
width:95%; height:95%;
background:#fff; color:#036; font-size:12px; line-height:150%;">
<!-- DIV弹出状态行：标题、关闭按钮 -->
<div style="background:#666; height:5%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px; padding:3 5 0 5; color:#fff"
onmousedown="drag(message_box);return false">
<span style="display:inline;width:150px;position:absolute;font-size:200%">标题项</span>
<span onClick="closeProc();" style="float:right;display:inline;cursor:hand;font-size:200%">×</span>
</div>
具体内容，可以是表格也可以是DIV
</div><!-- message -->
</div><!-- message_box -->
</body>
</html>
分享到：
相关推荐
在Web应用中，Div（Division）元素常被用来作为页面布局的容器，而通过JavaScript，我们可以将Div转换为可弹出且可拖动的窗口，以提供更好的用户体验。这个“JS弹出Div窗口(可拖拽)”的示例就是一个解决此类需求的...
弹出移动DIV窗口 弹出移动DIV 窗口弹出移动
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它...总的来说，JavaScript弹出DIV层窗口实例是网页交互设计中常见的功能，通过理解和实践，我们可以创建出各种自定义的弹出窗口效果，提升网站的用户体验。
在网页交互中，弹出层和弹出DIV效果是常见的功能，它们可以用来显示通知、警告、对话框或者进行用户交互。本资源提供的"JS弹出层，js弹出DIV效果源码下载"是一个运用JQUERY库实现的此类效果。 jQuery是一个广泛使用...
这个"js弹出可拖动div"的主题主要涵盖了HTML、CSS和JavaScript的结合，用于实现用户友好的界面元素。下面我们将深入探讨这个主题。 首先，我们需要一个基本的HTML结构来创建div元素。一个简单的div可能看起来像这样...
5. **框架内容**：描述中提到的“内容可为框架”，意味着这个弹出的div可以承载iframe元素，用于加载外部网页或页面片段。`iframe`是HTML中的另一个重要元素，它可以嵌入其他网页，提供了一个在当前页面内展示其他...
本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果：当鼠标移动到特定`div`上时，能够改变样式并弹出一个相关信息的`div`层。 首先，我们需要创建两个`div`元素：一个作为主内容区域，另一个作为弹出层。在...
接下来，我们可以创建一个隐藏的DIV作为弹出层： ```html <div id="popup" style="display:none;"> <!-- 在这里添加弹出内容 --> </div> ``` 然后，我们需要编写jQuery代码来控制弹出层的显示与隐藏。当用户触发...
在这个场景中，"jquery div 可拖拽弹出对话框" 指的是利用 jQuery 实现的一个功能，允许用户可以手动拖动 HTML 的 `div` 元素（通常用于创建对话框或模态窗口）在页面上自由移动。这种功能提高了用户体验，让用户...
### JavaScript 实现弹出模态效果div的知识点详解 #### 一、概述 在Web开发中，模态对话框（Modal Dialog）是一种常见的交互模式，它可以在不离开当前页面的情况下，展示一个弹出层用于提示用户信息或者进行某些...
这个实例中，`js弹出可移动窗口实例_现用.html`应该包含了完整的HTML和JavaScript代码，可以直接在浏览器中运行。用户可以通过点击“打开”按钮来显示对话框，然后可以通过鼠标拖动来移动对话框的位置。当用户点击...
- `subModal.js`和`common.js`：这些JavaScript文件负责弹出窗的动态行为，如打开、关闭、加载内容等。常见功能包括： - 事件监听：点击按钮或其他元素触发弹出窗 - 动画效果：平滑显示/隐藏弹出窗 - 内容加载：...
在JavaScript编程中，有时我们可能需要自定义弹出层来替代浏览器原生的`alert`、`prompt`或`confirm`对话框，以提供更丰富的交互体验或者在特定场景下，比如在`iframe`中使用时，保持页面的可操作性。本主题将详细...
标题“弹出div拖动层”所指的就是这样一个功能，它允许用户通过鼠标来移动一个浮层div，这种功能常见于对话框、提示窗口或者自定义菜单等元素。下面我们将深入探讨这个主题，包括div的基本概念、拖动功能的实现以及...
在本案例中，"js鼠标浮动显示div"指的是当鼠标移动到特定的input元素上时，会显示出一个div层，该div层中包含有与input相关的附加信息或者功能。 首先，我们需要了解几个关键的概念： 1. **事件监听器**：...
本教程将详细讲解如何利用jQuery实现一个功能：当鼠标移动到目标元素上时，弹出一个DIV（层）来展示相关的图片效果。 首先，我们需要在HTML文档中设置基础结构。在`jq页面中弹出DIV.html`这个文件中，我们可以看到...
在JavaScript（JS）中，实现一个可任意拖拽的弹出div是一项常见的需求，尤其在构建交互式Web应用时。这个功能可以增加用户界面的动态性和用户体验。下面将详细介绍如何利用JavaScript来实现这一功能。 首先，我们...
在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中，我们将探讨如何利用JavaScript来创建一个可拖动的弹出层，并控制其显示与隐藏。 首先，让我们理解`div`层的隐藏与显示。在HTML中，我们创建一个`div`元素并为其...
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框，JS源代码
"漂亮的js可移动弹出层"是利用JavaScript和jQuery技术实现的一种增强用户体验的交互设计。这种弹出层不仅美观，而且具有可移动性，允许用户根据需要自由调整其在屏幕上的位置。 JavaScript，简称JS，是一种轻量级的...