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需再刷新一下页面才能执行]

您可能感兴趣的文章:

弹出层

为JavaScript添加重载函数的辅助方法
大家都习惯了重载带来的便利。JavaScript有没有重载呢？有人会回答没有，因为函数会被覆盖；有人说有，我们可以模拟重载这一操作。
2010-07-07
一文详解JavaScript中的Mixin
类的出现最终使JavaScript非常容易使用继承法,JavaScript类比大多数人意识到的更强大,它是构建真正的mixins的良好基础，本文介绍JavaScript中的Mixin介绍的非常详细，需要的小伙伴可以参考阅读一下
2023-04-04
Uniapp中嵌入H5并在H5中跳转到APP的指定页面方法详解
Uniapp是一款基于Vue.js框架的跨平台开发工具,支持在一套代码中开发出运行于各大平台的应用程序,这篇文章主要给大家介绍了关于Uniapp中嵌入H5并在H5中跳转到APP的指定页面的相关资料,需要的朋友可以参考下
2023-09-09
原生js实现密码输入框值的显示隐藏
这篇文章主要为大家详细介绍了原生js实现密码输入框值的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
整理CocosCreator常用知识点
这篇文章主要介绍了整理CocosCreator常用知识点，这些知识点，平时几乎都能用到，希望同学们看完后，可以自己去试一下，加深印象
2021-04-04
深入讲解xhr（XMLHttpRequest）/jsonp请求之abort
这篇文章主要给大家深入的介绍了关于xhr（XMLHttpRequest）/jsonp请求之abort的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
完美解决IE9浏览器出现的对象未定义问题
下面小编就为大家带来一篇完美解决IE9浏览器出现的对象未定义问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-09-09
js正则格式化日期时间自动补0的两种解法
在javascript开发中,我们会遇到日期时间格式化的问题,下面这篇文章主要给大家介绍了关于js正则格式化日期时间自动补0的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-10-10
微信小程序通过自定义animate-numbers组件实现进入页面时数字跳动效果
文章介绍了如何在微信小程序中实现进入页面时的数字跳动效果,通过自定义一个名为`animate-numbers`的组件来实现这一功能,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧
2025-01-01
javascript实现3D变换的立体圆圈实例
这篇文章主要介绍了javascript实现3D变换的立体圆圈效果,涉及javascript动态操作页面元素实现滚动与变色的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08

DIV+CSS+JS 变灰弹出层

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具