今天在项目中用到了一个很好的div弹出层效果，拿出来和大家一起分享！
<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:pointer;font-size:200%">×</span>
</div>
具体内容，可以是表格也可以是DIV
</div><!-- message -->
</div><!-- message_box -->
</body>
</html>
分享到：
相关推荐
JS+CSS 实现遮罩居中弹出层（随浏览器窗口滚动条滚动） 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层，并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示，且随着浏览器窗口的滚动而滚动。 ...
然后，通过`JavaScript`来控制遮罩层和弹出层的显示和隐藏。可以使用`addEventListener`监听用户的点击事件，或者根据特定条件自动触发弹出。例如，当用户点击某个按钮时显示弹出层： ```javascript document....
根据给定文件的信息，本文将围绕“js+div+css弹出层”的实现方法进行详细介绍。弹出层在网页设计中十分常见，主要用于提供额外的信息展示或者操作界面，如登录框、注册框、提示信息等。 ### 一、基本概念 #### 1.1...
通过巧妙运用`div+css`，我们可以创建出美观、高效的网页框架，并结合全屏遮罩加载特效，提升用户的浏览体验。在实际开发中，结合JavaScript和jQuery，可以实现更多动态交互功能，让网站更具吸引力。
综上所述，实现"div 弹出层遮罩 兼容各大浏览器"涉及了HTML布局、CSS样式设计、JavaScript交互以及浏览器兼容性处理等多个方面。在实际开发中，我们还需要结合项目需求，考虑用户体验和性能优化，以打造出高效且易用...
在网页设计中，"div_css_js弹出层有遮罩"是一个常见的交互设计技术，用于创建弹出式窗口或对话框，通常用于显示通知、表单、广告等。这一技术结合了HTML的`<div>`元素、CSS样式以及JavaScript/jQuery的动态效果，以...
《jQuery+CSS3实现的遮罩弹出层动画详解》 在现代网页设计中，弹出层（Modal）和遮罩层（Overlay）是常见且重要的交互元素，它们用于显示重要信息、用户提示或者进行表单提交等操作。本篇文章将深入探讨如何利用...
标题中的“JQuery+DIV+CSS在本页面弹出遮罩层，如弹出的登录小窗口”涉及到了网页交互设计中的几个关键元素和技术。首先，JQuery是一种广泛使用的JavaScript库，它简化了JavaScript的DOM操作，事件处理，动画效果...
在网页设计中，"div弹出层js"是一种常见的交互元素，它允许用户与页面上的特定内容进行交互，如显示消息、表单或更多详细信息，而不会离开当前页面。这个自定义的实现主要涉及HTML的`div`元素、CSS样式以及...
本插件是关于“Jquery简单的弹出层带遮罩”的实现，它能够为网页提供一种优雅的方式来显示弹出窗口或对话框，并且在弹出窗口周围添加一个半透明的遮罩层，增强用户体验。 1. **jQuery基础** jQuery的核心在于它的...
弹出层内部有一个包含关闭按钮的`<div>`，这个按钮同样触发关闭动画。 总的来说，通过jQuery的事件处理和CSS3的动画功能，我们可以创建出交互性强且视觉效果丰富的弹出层。这种技术在现代网页设计中非常常见，能够...
本文档将详细介绍一个基于 JavaScript (简称JS)、DIV 和 CSS 的实现方案，该方案不仅能够支持多种类型的弹窗展示（包括 iframe 内容），还特别注重于不同浏览器间的兼容性处理。 #### 二、核心知识点详解 ##### 1....
本文将详细介绍如何使用JavaScript（JS）和层叠样式表（CSS）来实现一个带关闭按钮的DIV弹出窗口。 首先，我们需要理解HTML结构。在提供的代码中，有两个主要的`div`元素：`#ly`和`#Layer2`。`#ly`是用来创建一个半...
1. **HTML结构**：首先，在HTML文档中添加一个`<div>`元素作为遮罩层的基础，可以为其分配一个唯一的ID以便于后续的CSS和JS操作。 ```html <div id="mask"></div> ``` 2. **CSS样式**：接下来，使用CSS来定义...
"div弹出层"是利用CSS和JavaScript技术创建的一种动态效果。它通常包含一个由`<div>`标签定义的容器，该容器可以包含文本、图片、表单等多种内容。当触发特定事件（如点击按钮）时，这个`<div>`元素会从页面背景中...
本文将深入探讨如何使用jQuery和CSS3来创建一个带有动画效果的弹出框弹出层，以及其核心组件和实现原理。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。在本项目...
### div js css 弹出层代码详解 #### 一、概述 在网页设计与开发过程中，弹出层（Modal）是一种常见的交互元素，用于显示重要信息或操作提示，而不需用户离开当前页面。通过组合使用HTML、CSS和JavaScript，我们...
本文将详细探讨如何利用`div`元素实现动态弹出层，并根据传入的不同参数显示不同的内容。这在交互式用户体验设计中非常常见，例如，用于展示详细信息、提供用户确认或展示各种警告消息。 首先，我们要理解`div`的...
1. reveal.css：这是插件的样式文件，定义了弹出层的基本样式和遮罩效果。通过调整这里的CSS代码，可以定制弹出框的外观。 2. demo.html：这是一个示例文件，展示了如何在实际项目中应用jQuery.reveal插件，以及不同...
在网页设计中，"div弹出层，带拖动"是一个常见的交互功能，它涉及到HTML、CSS和JavaScript的综合运用。下面将详细讲解这个知识点。 首先，`div`是HTML中的一个块级元素，用于组织页面结构。在创建弹出层时，我们...