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 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
react基本安装与测试示例
Apr 27 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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
图解上海144收音机
2021/03/02 无线电
php注入实例
2006/10/09 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
python实现随机漫步算法
2018/08/27 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python中adb有什么功能
2020/06/07 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
会计人员岗位职责
2014/03/19 职场文书
护校行动方案
2014/05/31 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
青年标兵事迹材料
2014/08/16 职场文书
学习心理学的体会
2014/11/07 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python