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 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
php图片上传类 附调用方法
2016/05/15 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
Python深入学习之对象的属性
2014/08/31 Python
Python函数参数类型*、**的区别
2015/04/11 Python
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python flask框架端口失效解决方案
2020/06/04 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
应届生服务员求职信
2013/10/31 职场文书
电子信息毕业生自荐信
2013/11/16 职场文书
小学教研工作制度
2014/01/15 职场文书
小学教师办公室制度
2014/02/03 职场文书
《郑和远航》教学反思
2014/04/16 职场文书
教师节寄语2015
2015/03/23 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js