使用JS+DIV+CSS实现弹出窗口示例
"这是一个关于使用JavaScript、HTML div 和 CSS 创建弹出层的简单示例。这个例子展示了如何模拟弹出窗口,适用于网页中的交互式设计。" 在这个示例中,主要涉及了三个关键技术:JavaScript(js)、HTML div 和 CSS。首先,我们来看HTML部分: HTML 代码创建了两个div元素,一个用于弹出层(`.hideDlg` 和 `.showDlg`),另一个用于遮罩层(`.showDeck` 和 `.hideDeck`)。`.hideDlg` 和 `.hideDeck` 是初始状态下的隐藏类,而`.showDlg` 和 `.showDeck` 是显示状态下的类。`.showDlg` 定义了弹出窗口的样式,包括背景色、边框、位置和层级。`.showDeck` 作为遮罩层,全屏覆盖,颜色通常为灰色,用于增加弹出层的视觉效果。 接下来是CSS部分: CSS 用于设置这些div元素的样式。例如,`.showDlg` 的 `position:absolute` 属性使其相对于最近的非 static 定位的祖先元素定位,而 `z-index:5` 确保它位于其他元素之上。`.showDeck` 使用绝对定位占据整个屏幕,并且设置了一个半透明的背景,以实现遮罩效果。 最后,JavaScript 部分用于控制弹出层的显示和隐藏: JavaScript 函数 `showDlg()` 被调用时,会查找ID为 "deck" 的div元素,如果没有找到,就创建一个新的div元素并附加到body上。然后,将 "deck" 元素的类更改为 ".showDeck",使其显示并应用半透明效果。这个函数通常与某个用户交互事件关联,如点击按钮或链接。 为了关闭弹出层,可以创建一个对应的 `hideDlg()` 函数,将 "deck" 元素的类恢复为 ".hideDeck",同时隐藏 `.showDlg` 弹出层。此外,可能还需要考虑其他交互逻辑,如防止用户在弹出层打开时与页面其余部分互动,或者添加动画效果来增强用户体验。 总结来说,这个示例提供了一个基础的弹出层实现方法,可以作为进一步开发更复杂弹出窗口功能的基础。通过结合JavaScript的动态操作和CSS的样式控制,我们可以创建出各种交互式的弹出对话框,满足网页设计的需求。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>弹出模态对话框测试[IE6下测试通过]</title>
<style type="text/css">
.hideDlg
{
height:129px;width:368px;
display:none;
}
.showDlg
{
background-color:#ffffdd;
border-width:3px;
border-style:solid;
height:129px;width:368px;
position: absolute;
display:block;
z-index:5;
}
.showDeck {
display:block;
top:0px;
left:0px;
margin:0px;
padding:0px;
width:100%;
position:absolute;
z-index:3;
background:#cccccc;
}
.hideDeck
{
display:none;
}
</style>
<script type="text/javascript">
function showDlg()
{
//显示遮盖的层
var objDeck = document.getElementById("deck");
if(!objDeck)
{
objDeck = document.createElement("div");
objDeck.id="deck";
document.body.appendChild(objDeck);
}
objDeck.className="showDeck";
objDeck.style.filter="alpha(opacity=50)";
objDeck.style.opacity=40/100;
objDeck.style.MozOpacity=40/100;
//显示遮盖的层end
//禁用select
hideOrShowSelect(true);
剩余5页未读,继续阅读
- 粉丝: 10
- 资源: 7
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦