弹出DIV同时加入背景层实现方式很多，有原创也有借助js框架实现的，这些弹出的div功能都比较强悍，实际项目中有时候根本不需要如此般复杂操作，只是弹出div进行数据展现或者是有效的操作而已，以上述的方式加入无疑让简单的东西复杂化，使程序执行效率降低。繁复的东西技术含量的确挺高（EXT），同时不可避免会有其它方面的牺牲，以下弹出DIV简单高效，代码也很简洁，发出了一起看看，全部源代码如下，保存为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>
/**
**源码部分结束
**/
分享到：
相关推荐
在“JS弹出Div窗口(可拖拽)”的压缩包中，可能包含HTML文件用于展示Demo，JavaScript文件包含了实现弹出和拖动功能的代码，以及CSS文件用于样式定义。通过分析和学习这些文件，开发者可以理解并掌握如何在自己的项目...
在"JS做的隐藏与显示DIV可拖动弹出层"这个实例中，我们将探讨如何利用JavaScript来创建一个可拖动的弹出层，并控制其显示与隐藏。 首先，让我们理解`div`层的隐藏与显示。在HTML中，我们创建一个`div`元素并为其...
在JavaScript（JS）中，实现一个可任意拖拽的弹出div是一项常见的需求，尤其在构建交互式Web应用时。这个功能可以增加用户界面的动态性和用户体验。下面将详细介绍如何利用JavaScript来实现这一功能。 首先，我们...
本知识点主要关注如何使用jQuery实现一个可拖拽的弹出DIV组件，该组件适用于创建可交互的对话框或者浮动窗口。描述中提到，这个组件是组件化的，意味着它可以方便地被复用和定制，而图片需要自行替换，这意味着组件...
《jQuery弹出可拖动Div模态层源码解析与应用》 在Web开发中，交互性和用户体验成为了衡量一个网站质量的重要标准。jQuery作为一个轻量级的JavaScript库，以其简洁的API和强大的功能，深受开发者喜爱。今天我们将...
在网页设计和开发中，创建一个可拖动的弹出div层是非常常见且实用的技术，尤其是在构建用户交互界面时。标题“弹出div拖动层”所指的就是这样一个功能，它允许用户通过鼠标来移动一个浮层div，这种功能常见于对话框...
标题“弹出可拖动的div”涉及到前端开发中的交互设计和JavaScript技术。在这个话题中，我们将探讨如何创建一个可以在页面上自由拖动的div元素，这是许多网页应用和用户界面设计中的常见需求。 首先，我们需要理解...
最后，`script.js`文件是项目的JavaScript代码，可能包含了初始化弹出窗口和拖拽功能的逻辑。例如，可能有代码片段像`$(function() { $('.popover').popover(); });`来启动Bootstrap Popover，以及`$(".popover")....
在网页设计和开发中，创建一个可拖动的弹出DIV框是一项常见的需求，它可以用于显示警告、对话框、设置面板等。这个标题"很好很强大弹出可拖动的DIV框"暗示我们将讨论一种高效且功能强大的实现方法。描述中的重复文字...
可选属性: 1.autoSize="true" 让div自适应大小 可选值true false 默认false 2.width height弹出框的...7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置属性后,直接调用js方法即可使用,相当方便.
在网页开发中，创建一个可拖拽的div层是一项实用的技术，它允许用户通过鼠标操作移动界面元素，提升用户体验。这个技术主要涉及到HTML、CSS和JavaScript的交互运用，特别是JavaScript中的事件监听和DOM操作。接下来...
标题中的“弹出可拖动DIV，CSS圆角”指的是在网页设计中使用HTML和CSS技术创建一个可以被用户拖动并且具有圆角效果的浮动窗口。这种功能常见于各种弹窗、对话框或者提示框设计，提升用户体验，使得交互更加直观和...
在这个场景中，"jquery div 可拖拽弹出对话框" 指的是利用 jQuery 实现的一个功能，允许用户可以手动拖动 HTML 的 `div` 元素（通常用于创建对话框或模态窗口）在页面上自由移动。这种功能提高了用户体验，让用户...
JavaScript弹出窗口拖拽插件是一种实用的前端技术，它允许用户通过鼠标操作来改变div元素（即弹出窗口）的位置。这种插件基于JavaScript语言，无需依赖其他库如jQuery，因此具有轻量级和高效的特性。在网页设计中，...
在IT领域，创建一个弹出且可拖动的Div元素是一项常见的需求，尤其在构建用户界面时。这个Div通常用于展示一些临时信息或者提供交互功能，比如本例中的树形菜单。下面我们将深入探讨如何实现这样的功能，并结合提供的...
在这个“Div可拖动窗口，弹出提示消息窗口”的项目中，我们主要关注的是如何利用JavaScript来实现两个关键功能：一是使Div元素具备拖动和大小调整的能力，二是创建一个弹出的提示消息窗口，其效果类似于QQ的屏幕右下...
在本文中，我们将深入探讨如何利用JavaScript实现一个弹出div窗口，包括支持遮罩、拖动、嵌入页面和换肤等功能。 首先，让我们了解“弹出窗口”或“弹出层”的概念。在网页设计中，弹出窗口通常指的是不依赖浏览器...
JS拖动DIV，适用于web开发，拖动弹出窗口，简单易用！！
在网页开发中，jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`...