直接上代码：
html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>testdiv</title>
<link rel="stylesheet" type="text/css" media="screen" href="div.css" />
<script src="div.js" type="text/javascript"></script>
</head>
<body>
<a href="javascript:void(0)" onclick="show('light')">open1</a>
<a href="javascript:void(0)" onclick="show('light2')">open2</a>
<div id="light" class="white_content">
<div class="close"><a href="javascript:void(0)" onclick="hide('light')"> close</a></div>
<div class="con">
问题描述：<input type="text" /><br>
问题类型：<select ><option value="1">1</option><option value="2">2</option></select><br>
意见描述：<input type="text"/>
</div>
</div>
<div id="light2" class="white_content">
<div class="close"><a href="javascript:void(0)" onclick="hide('light2')"> close</a></div>
<div class="con">
content2
</div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
js代码：
function show(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='block';
fade.style.display='block';
}
function hide(tag){
var light=document.getElementById(tag);
var fade=document.getElementById('fade');
light.style.display='none';
fade.style.display='none';
}
css代码：
* {
margin:0;
padding:0
}
html, body {
height: 100%;
width: 100%;
font-size:12px
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 30%;
padding: 6px 16px;
border: 12px solid #D6E9F1;
background-color: white;
z-index:1002;
overflow: auto;
}
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color:#f5f5f5;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.close {
float:right;
clear:both;
width:100%;
text-align:right;
margin:0 0 6px 0
}
.close a {
color:#333;
text-decoration:none;
font-size:14px;
font-weight:700
}
.con {
text-indent:1.5pc;
line-height:21px
}
ok
分享到：
相关推荐
在网页设计中，CSS（层叠样式表...总之，通过CSS和JavaScript（jQuery），我们可以轻松实现各种滑动弹出的div效果，增强网页的互动性和用户体验。设计时应考虑性能和可用性，确保过渡效果平滑且不影响页面的其他功能。
【div弹出框js弹出框】 在网页设计中，弹出框是一种常见的交互元素，用于显示额外的信息或获取用户的输入。"div弹出框"和"js弹出框"是指利用HTML的div元素和JavaScript技术来实现这种功能。本文将深入探讨如何使用...
6. **动画效果**：如果希望div弹出和关闭有动画效果，可以使用CSS3的transition或JavaScript的setTimeout等方法实现平滑过渡。 结合上述知识点，你可以创建一个功能完备且视觉效果良好的js弹出div。记住，为了提高...
JS+CSS实现带关闭按钮的DIV弹出窗口
1. **CSS（层叠样式表）**：div弹出窗口的样式主要由CSS控制，包括颜色、字体、边框、背景、定位等。CSS允许开发者精确控制元素的外观和布局，使得弹出窗口不仅功能实用，而且视觉效果出众。 2. **盒模型**：在CSS...
在网页设计中，"div+css 弹出层"是一种常见的交互效果，它允许用户点击某个元素后，弹出一个浮动窗口展示更多的信息或者进行特定的操作。这种效果广泛应用于登录注册、消息提示、模态对话框、下拉菜单等场景。下面...
本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果：当鼠标移动到特定`div`上时，能够改变样式并弹出一个相关信息的`div`层。 首先，我们需要创建两个`div`元素：一个作为主内容区域，另一个作为弹出层。在...
在这个“DIV弹出层+定位”的例子中，我们关注的是如何利用`DIV`来创建一个可滑动的弹出层，并且使其在页面上保持固定的位置。这种功能通常用于显示提示信息、模态对话框或者加载额外的内容。 首先，`DIV弹出层`是指...
此外，`div弹出窗口.html`文件可能包含了HTML结构，定义了弹出窗口的内容以及触发弹出的元素。这个文件会引用到上面提到的CSS和JS文件，确保样式和交互功能的正确应用。 总的来说，实现"div+css实现弹出窗口背景变...
总结来说，"javascript div弹出窗口 可封装为JS类"这个主题涉及到了JavaScript基础、HTML DOM操作、CSS样式设计以及模块化编程思想。通过封装`div`弹窗为JS类，我们可以创建一个灵活、可维护的弹窗系统，便于在各种...
根据提供的文件信息，本文将详细解释如何使用DIV+CSS实现一个美观且实用的弹出窗体，这种技术常用于创建类似QQ空间登录窗口的效果。本文将深入探讨代码中涉及的关键CSS样式、HTML结构以及简单的JavaScript交互逻辑。...
综上所述，"div_css_js弹出层有遮罩"是一个综合性的技术，涉及到HTML结构、CSS样式设计以及JavaScript交互，是网页动态效果中的一个重要部分。通过熟练掌握这些知识点，可以创建出既美观又实用的弹出层效果。
2.width height弹出框的长宽 默认500 300 3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or ...
在 Web 开发中，弹出居中背景半透明 div 层是一种常见的交互效果，通过 JavaScript 和 CSS，我们可以轻松实现这种效果。在本文中，我们将详细介绍如何使用 JS+CSS 实现弹出居中背景半透明 div 层的方法。 首先，让...
在网页设计和开发中，`div`元素是一个非常基础且重要的HTML结构单元，它...了解这些基本概念和操作后，开发者可以根据具体项目需求，灵活运用`div弹出层`和`lhgdialog3.0`来创建功能强大、用户体验良好的弹出层效果。
通过`index.html`的结构，`popup.js`和`openDivWindow.js`的JavaScript逻辑，以及适当的CSS样式，我们可以创建一个具有交互性和良好视觉效果的弹出层组件。这样的技术在网页开发中广泛应用，提高了网页的动态性和...
通过学习这些例子，你可以掌握如何创建一个具有专业外观和行为的Div弹出框，包括但不限于： - 使用CSS控制Div的样式和位置 - 使用JavaScript实现动态显示和隐藏 - 处理用户交互，如点击事件 - 保证跨浏览器兼容性 ...
这个压缩包文件"div弹出层打包，包括弹出图片浏览"提供了一套解决方案，帮助开发者轻松实现这种效果。以下是关于这个主题的详细知识点： 1. **Div元素**：Div（Division）是HTML中的一个块级元素，主要用于布局和...
在网页设计和开发中，"div+css+js 实现透明屏蔽当前页面，并弹出新层进行操作" 是一种常见的交互设计技术，用于提供更好的用户体验。这种方法通常用于创建模态对话框、提示框或者加载遮罩层，让用户专注于当前的任务...
本资源提供的"JS弹出层，js弹出DIV效果源码下载"是一个运用JQUERY库实现的此类效果。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的核心特性包括选择器、DOM...