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_06_理解对象的创建过程
Oct 15 Javascript
javascript 原型继承介绍
Aug 30 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
jQuery实现菜单栏导航效果
Aug 15 jQuery
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
jQuery实现倒计时功能完整示例
Jun 01 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
学习php开源项目的源码指南
2014/12/21 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
2013/10/22 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
上课迟到检讨书
2014/02/19 职场文书
促销活动总结范文
2014/04/30 职场文书
企业员工集体活动方案
2014/08/17 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
同学聚会通知短信
2015/04/20 职场文书
担保书格式范文
2015/09/22 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
Nginx配置使用详解
2022/07/07 Servers