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 AutoScroller 函数类
May 29 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
React快速入门教程
Jan 17 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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 set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
PHP对象相关知识总结
2017/04/09 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
JS打印组合功能
2016/08/04 Javascript
nodejs基础知识
2017/02/03 NodeJs
angular中的post请求处理示例详解
2020/06/30 Javascript
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
电大自我鉴定
2013/10/27 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
顶撞老师检讨书
2014/02/07 职场文书
现金出纳岗位职责
2014/03/15 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2014财务年度工作总结
2014/11/11 职场文书
教师个人教学总结
2015/02/11 职场文书
超市店长竞聘书
2015/09/15 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS
MySQL详细讲解变量variables的用法
2022/06/21 MySQL
Java使用HttpClient实现文件下载
2022/08/14 Java/Android