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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
JS常见内存泄漏及解决方案解析
May 30 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将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
Laravel 队列使用的实现
2019/01/08 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
javascript第一课
2007/02/27 Javascript
javascript 获取网页参数系统
2008/07/19 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
python mysqldb连接数据库
2009/03/16 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
python中setuptools的作用是什么
2020/06/19 Python
CSS3 边框效果
2019/11/04 HTML / CSS
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
《与象共舞》教学反思
2014/02/24 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
安全责任书
2015/01/29 职场文书
冰雪公主观后感
2015/06/16 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书