JavaScript点击按钮后弹出透明浮动层的方法


Posted in Javascript onMay 11, 2015

本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法。分享给大家供大家参考。具体分析如下:

这里实现点击后页面变灰色,并用JS弹出一个居中的浮动层提示窗口,这个窗口是透明的,可以设置透明度,网上已经有很多类似的JavaScript代码,你可以借鉴一下。

<HTML>
<HEAD>
<TITLE>浮动层居中的对话框效果演示</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<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);
 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控制弹出的</p>'+
  '<p><button onclick="window.neatDialog.close()">关闭</button></p>';
 new NeatDialog(sHTML, "你知道吗?", false);
}
</SCRIPT>
<BODY>
<H1>浮动层居中的效果</H1>
<BUTTON onclick=openDialog()>点此演示效果</BUTTON>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
jQuery.each使用详解
Jul 07 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
js实现图片实时时钟
Jan 15 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 #Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 #Javascript
jQuery子窗体取得父窗体元素的方法
May 11 #Javascript
js控制div弹出层实现方法
May 11 #Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 #Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 #Javascript
JS选项卡动态替换banner图片路径的方法
May 11 #Javascript
You might like
学习使用PHP数组
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
php页面防重复提交方法总结
2013/11/25 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
九步学会Python装饰器
2015/05/09 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
如何利用python 读取配置文件
2021/01/06 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
自我鉴定范文200字
2013/10/02 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
社团活动总结书
2014/06/27 职场文书
日语系毕业求职信
2014/07/27 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
CentOS MySql8 远程连接实战
2022/04/19 MySQL