<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS控制按钮弹出DIV压暗背景</title>
<style type="text/css">
body,div,a,h2,p{ padding:0; margin:0; font-size:14px; font-family:verdana;}
h2{ background:#222; border: 1px solid #777; border-bottom:1px solid #ccc; height:26px; line-height:26px; padding:0 9px; width: 500px; color:#cfcfcf; font-weight: normal; }
a { color:#eee; width:30px; margin:50px auto; display:block; border: 1px solid #555; text-decoration: none; background: #222; font-size: 12px; padding: 5px 10px; text-align: center; }
#dark_bg{ background:#111; filter:alpha(opacity=70); opacity:0.70; }
#new_dialogue{ margin:-250px 0 0 -250px; position:absolute; top:50%; left:50%; }
#close{ cursor:pointer; font: 14px Geneva, Arial, Tahoma; top: 2px; right: 9px; font-weight: bold; padding: 3px; background: #444; float: right; margin-top: 2px; }
/*
@media all and (min-width: 0px){
#close{ position: static; }父元素用了绝对定位,子元素用相对定位,这个子元素的子元素又用绝对定位在opera下无效
}
*/
#content{ padding:10px; width:500px; height:500px; background:#fff; }
</style>
<script type="text/javascript">
//生成背景
function create_bg(){
//建立一个div的节点
bg = document.createElement("div");
bg.id = "dark_bg";
with(bg.style){
position = "absolute";
top = "0";
left = "0";
width = document.documentElement.scrollWidth + "px";
if(document.documentElement.scrollHeight<document.documentElement.clientHeight){
height = document.documentElement.clientHeight + "px";
}else{
height = document.documentElement.scrollHeight + "px";
}
}
//打开对话框后禁用浏览器的滚动条
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
//把这个节点附加到body上
document.body.appendChild(bg);
}
//当窗口改变时重建dark_bg的大小,即铺满窗口
window.onresize = function(){
bg.style.width = document.documentElement.scrollWidth + "px";
if(document.documentElement.scrollHeight<document.documentElement.clientHeight){
bg.style.height = document.documentElement.clientHeight + "px";
}else{
bg.style.height = document.documentElement.scrollHeight + "px";
}
}
//生成对话框
function show(){
create_bg();
var visual = document.createElement("div");
visual.id = "new_dialogue";
var html = "";
html = '<h2><span id="close" onclick="show_close()">x</span>标题1</h2>';
html += '<div id="content">内容1</div>';
visual.innerHTML = html;
document.body.appendChild(visual);
}
//生成对话框
function as(){
create_bg();
var visual = document.createElement("div");
visual.id = "new_dialogue";
var html = "";
html = '<h2><span id="close" onclick="show_close()">x</span>标题2</h2>';
html += '<div id="content">内容2</div>';
visual.innerHTML = html;
document.body.appendChild(visual);
}
//去掉刚才建立的节点
function show_close(){
var new_dialogue = document.getElementById("new_dialogue");
var dark_bg = document.getElementById("dark_bg");
new_dialogue.parentNode.removeChild(new_dialogue);
dark_bg.parentNode.removeChild(dark_bg);
}
</script>
</head>
<body>
<a href="#" onclick="show()">按钮1</a>
<a href="#" onclick="as()">按钮2</a>
</body>
</html>
分享到：
相关推荐
本文将深入探讨如何使用JavaScript实现弹出div，以及如何返回原来的页面。 首先，我们需要理解什么是弹出div。在HTML中，div是一个常用的布局元素，可以用来组织和分隔内容。在JavaScript中，通过改变CSS样式，我们...
在网页设计中，"弹出居中DIV窗口，背景逐渐变暗"是一种常见的用户体验设计手法，常用于创建模态对话框、提示信息或者加载等待效果。这种设计可以使用户更加专注于当前的操作，避免背景内容的干扰。下面将详细介绍...
例如，当用户点击某个按钮时，JavaScript函数会被调用，增加背景变暗层的类名，显示弹出窗口，同时调整背景层的透明度；关闭弹出窗口时，移除这些类名，恢复背景的正常亮度。 此外，`div弹出窗口.html`文件可能包含...
在这个特定的场景中，我们看到的标题 "点击按钮弹出DIV，可以拖动，操作方便！" 描述了一个交互式的网页功能，用户可以通过点击按钮来显示一个可拖动的 `div` 对象。 首先，我们需要理解这个功能的核心组成部分： ...
总结来说，"NET弹出层弹出div"是ASP.NET开发中提高用户体验的一种技巧，它利用`div`元素和JavaScript/jQuery实现动态显示和隐藏，结合服务器端代码处理业务逻辑，提供了一种高效且用户友好的信息交互方式。
标题中的“左侧隐藏div，点击按钮弹出”是一种常见的网页交互设计，主要涉及到HTML、CSS以及JavaScript技术。这种设计常用于创建例如侧边栏、菜单或者提示框等元素，通过初始隐藏的方式节省页面空间，当用户触发特定...
"js弹出div效果"是指利用JavaScript控制HTML中的<div>元素动态显示和隐藏，以实现弹窗功能。这种效果可以用于消息提示、用户确认、登录窗口等多种场景，使页面更具交互性和用户体验。 首先，我们需要了解<div>元素...
在本实例中，我们将深入探讨如何使用JavaScript来创建一个弹出DIV层窗口。 首先，我们需要了解HTML结构。`index.htm`和`test.html`文件可能包含了用于展示弹出窗口的基础HTML元素。通常，一个基本的HTML结构会包括...
这个“JS弹出Div窗口(可拖拽)”的示例就是一个解决此类需求的实用方案。 首先，让我们深入理解Div元素。Div是HTML中的一个块级元素，它可以容纳其他HTML元素并进行样式化。通过CSS，我们可以设置Div的宽高、边距、...
4. 用户交互：为了提升用户体验，弹出div通常会包含关闭按钮或者背景点击关闭功能。这需要添加相应的事件监听器，并在触发时调用隐藏div的方法。 5. 可重用性：作为插件，其设计应当考虑通用性和可配置性，允许...
在JS弹出层和弹出DIV效果中，"showMesBox"可能是这个效果的ID或者类名，用于在页面上定位并控制这个弹出元素。"showMesBox"通常会包含一个div元素，通过CSS来定义其样式，如位置、大小、背景色、边框等，使其能够在...
结合JavaScript（尤其是jQuery库）可以实现丰富的交互效果，比如滑动弹出div的效果。这种效果常见于下拉菜单、模态框或者侧边栏等，能够提供良好的用户体验，使网站更具动态感和吸引力。 首先，我们要理解CSS在实现...
网页弹出div层的技术在网页开发中非常常见，主要用于创建模态对话框、提示信息或者加载新内容。这种技术利用JavaScript进行实现，结合HTML和CSS，可以为用户提供丰富的交互体验。下面将详细介绍如何使用js-...
这个标题所指的知识点主要涵盖两个部分：一是div元素及其布局，二是JavaScript实现弹出框的原理与方法。 首先，我们来看`div`元素。在HTML中，`<div>`是“division”的缩写，用于定义一个内容区域，它可以包含其他...
【div弹出框js弹出框】 在网页设计中，弹出框是一种常见的交互元素，用于显示额外的信息或获取用户的输入。"div弹出框"和"js弹出框"是指利用HTML的div元素和JavaScript技术来实现这种功能。本文将深入探讨如何使用...
### Js弹出div和关闭 #### 弹出div的原理与实现 在网页开发中，有时我们需要在用户执行某些操作时，例如点击某个按钮或链接后，弹出一个窗口来显示额外的信息或者让用户进行一些互动。使用JavaScript来实现这种弹...
js弹窗js弹出DIV,并使整个页面背景变暗 </div> <!--按钮--> <div style="background:#418BCA;width:80%;margin:0auto;height:1.5rem;line-height:1.5rem;text-align:center;color:#fff;margin-top:1rem;-moz-border-...
JS+CSS实现带关闭按钮的DIV弹出窗口
在本案例中，"可封装为JS类"意味着开发者创建了一个可复用的JavaScript对象，该对象可以方便地管理和控制这些弹出窗口。 首先，让我们了解`div`元素。在HTML中，`<div>`是“division”（分隔）的缩写，是一个通用的...
在IT行业中，"点击按钮弹出窗口"是一个常见的交互设计技术，主要应用于Web开发领域。这一功能使得用户可以通过点击特定的界面元素（如a标签）来打开一个新的小型网页窗口，通常用于显示详细信息、对话框或者进行特定...