DIV+CSS+JS 变灰弹出层

更新时间：2009年10月27日 13:53:10 作者：

javascript 弹出层效果代码。需要的朋友可以测试下。

浮动层居中的对话框效果演示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xml:lang="zn" xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>浮动层居中的对话框效果演示</TITLE> <FCK:META http-equiv=content-type content="application/xhtml+xml; charset=gb2312" /> <STYLE type=text/css> HTML { HEIGHT: 100% } BODY { HEIGHT: 100% } BODY { FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif } DIV.neat-dialog-cont { Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100% } DIV.neat-dialog-bg { Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #eee; opacity: 0.7 } DIV.neat-dialog { BORDER-RIGHT: #555 1px solid; BORDER-TOP: #555 1px solid; Z-INDEX: 99; MARGIN-LEFT: auto; BORDER-LEFT: #555 1px solid; WIDTH: 30%; MARGIN-RIGHT: auto; BORDER-BOTTOM: #555 1px solid; POSITION: relative; TOP: 25%; BACKGROUND-COLOR: #fff } DIV.neat-dialog-title { PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.1em; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0.1em; BORDER-BOTTOM: #444 1px solid; POSITION: relative } IMG.nd-cancel { RIGHT: 0.2em; POSITION: absolute; TOP: 0.2em } DIV.neat-dialog P { PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; PADDING-TOP: 0.2em; TEXT-ALIGN: center } </STYLE> <SCRIPT type=text/javascript> function NeatDialog(sHTML, sTitle, bCancel) { window.neatDialog = null; this.elt = null; if (document.createElement && document.getElementById) { var dg = document.createElement("div"); dg.className = "neat-dialog"; if (sTitle) sHTML = '<div class="neat-dialog-title">'+sTitle+ ((bCancel)? '<img src="x.gif" alt="Cancel" class="nd-cancel" />':'')+ '</div>\n' + sHTML; dg.innerHTML = sHTML; var dbg = document.createElement("div"); dbg.id = "nd-bdg"; dbg.className = "neat-dialog-bg"; var dgc = document.createElement("div"); dgc.className = "neat-dialog-cont"; dgc.appendChild(dbg); dgc.appendChild(dg); //adjust positioning if body has a margin if (document.body.offsetLeft > 0) dgc.style.marginLeft = document.body.offsetLeft + "px"; document.body.appendChild(dgc); if (bCancel) document.getElementById("nd-cancel").onclick = function() { window.neatDialog.close(); }; this.elt = dgc; window.neatDialog = this; } } NeatDialog.prototype.close = function() { if (this.elt) { this.elt.style.display = "none"; this.elt.parentNode.removeChild(this.elt); } window.neatDialog = null; } function openDialog() { var sHTML = '<p>你现在看到的是一个层窗口，是被JS控制弹出的，<a href="https://www.jb51.net">www.jb51.net</a>脚本之家！</p>'+ '<p><button onclick="window.neatDialog.close()">关闭</button></p>'; new NeatDialog(sHTML, "欢迎光临!", false); } </SCRIPT> <BODY> <H1>浮动层居中的效果</H1> <BUTTON onclick=openDialog()>点此演示效果</BUTTON> </BODY></HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

弹出层

js 验证身份证信息有效性
根据身份证号码编码规则对其进行有效性验证，具体实现如下，大家可以参考下
2014-03-03
JavaScript 中的单例内置对象Global 与 Math
这篇文章主要介绍了JavaScript 中的单例内置对象Global与Math，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
el-date-picker与el-time-picker的时间格式设置代码
这篇文章主要介绍了el-date-picker与el-time-picker的时间格式设置代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-11-11
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
本篇文章主要是对JS控件ASP.NET的treeview控件全选或者取消的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
js location.replace与location.reload的区别
js location.replace与location.reload的区别，经常能用的到，需要的朋友可以可以下。
2010-09-09
用JS写的简单的计算器实现代码
参加某公司的面试后，有一机试题目：用web技术开发一个B/S结构的公式解析器。于是想了想思路，神来一笔想先写个计算器程序做基础，于是便写了这个程序。
2009-09-09
javascript cookie的基本操作（添加和删除）
这篇文章主要介绍了javascript cookie的基本操作的相关资料,这里对Cookie的操作进行了详细介绍包括获取，新建，设置有效期，添加和删除等，需要的朋友可以参考下
2017-07-07
JavaScript实现颜色查看器
这篇文章主要为大家详细介绍了JavaScript实现颜色查看器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
原生JS实现的自动轮播图功能详解
这篇文章主要介绍了原生JS实现的自动轮播图功能,结合实例形式详细分析了基于原生js实现轮播图的原理、操作步骤及操作注意事项,需要的朋友可以参考下
2018-12-12
javascript 字符串连接的性能问题(多浏览器)
今天看了javascript 高级程序设计谈到了字符串连接的性能问题
2008-11-11