JavaScript点击按钮后弹出透明浮动层的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript实现的浮动层框架用法实例分析

    JavaScript实现的浮动层框架用法实例分析

    本文实例讲述了JavaScript实现的浮动层框架用法.分享给大家供大家参考.具体如下: 这是一个JavaScript编写的浮动层框架,作为框架来说,骨干已经完成了.可以实现"类"."构造函数"."继承"(木有实现多继承)."静态方法"."重载"(木有实现多态),对我来说主要的意义就是,我喜欢这种代码风格,可以非常简单的重用和二次开发. 运行效果截图如下: 在线演示地址如下: http://demo.jb5

  • JavaScript实现模仿桌面窗口的方法

    本文实例讲述了JavaScript实现模仿桌面窗口的方法.分享给大家供大家参考.具体如下: 这里使用JS模仿了桌面窗口的移动.八个方向的缩放.最小化.最大化和关闭,以及 双击缩小放大窗口.改变窗口大小的预览效果等功能. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

  • javascript弹出拖动窗口

    可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,下面通过一段javascript代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>

  • JavaScript实现上下浮动的窗口效果代码

    JavaScript实现上下浮动的窗口效果代码

    本文实例讲述了JavaScript实现上下浮动的窗口效果代码.分享给大家供大家参考.具体如下: 这里介绍使用JavaScript实现上下浮动的窗口,在垂直方向上漂浮,代码内的JS函数有超丰富的浮动层定义功能,像浮动层位置高度.初始化事件触发器.设定浮动层为可见,用style.left设定浮动层左边距.浮动层的运动速度等,还有更多的设置选项都能实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-up-down-float-move-win

  • JavaScript 浮动定位提示效果实现代码第1/2页

    JavaScript 浮动定位提示效果实现代码第1/2页

    这个效果本身难度不大,主要在程序结构和扩展中下了些功夫,务求用起来更方便,能用在更多的地方.程序特点 1,同一个提示框用在多个触发元素时,只需一个实例: 2,显示和隐藏分别有点击方式和触发方式选择: 3,能设置延时显示和隐藏: 4,有25种预设定位位置: 5,可在预设定位基础上,再自定义定位: 6,可设置自适应窗口定位: 程序说明 [Tip对象] Tip对象就是用来显示提示信息的容器,程序用Tip属性表示.这个没什么要求,程序初始化时会对它进行一些设置. 首先进行下面设置: 复制代码 代码如下:

  • JavaScript实现的圆形浮动标签云效果实例

    JavaScript实现的圆形浮动标签云效果实例

    本文实例讲述了JavaScript实现的圆形浮动标签云效果.分享给大家供大家参考.具体如下: 这里介绍的JS标签云效果,在鼠标的作用下会自动转动,整体上围绕成一个圆形,各个标签之间无需Div代码,直接文字+链接的形式,有多少就显示多少,JavaScript会自动调整显示数量,让视觉效果最佳. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

  • JavaScript实现网页上的浮动广告的简单方法

    漫游于网络之间,你会发觉,因特网不但是信息的海洋,也是广告的海洋.除了普通的Gif Banner.Flash外,浮动广告也是时下网上较为流行的广告形式之一.当你拖动浏览器的滚动条时,这种在页面上浮动的广告,可以跟随屏幕一起移动.尽管这种效果对于广告展示有相当的实用价值,但对浏览你网页的人来讲,这则是个既妨碍阅读,又影响阅读兴趣的东西,因此一定不能滥用.不过,如果你能善用的话,它就能发挥出极大的作用. 要做出浮动式广告的效果并不困难,如果你有JS基础的可以自己写一个,如果连写都懒得写的话,到网上下

  • javascript 表格排序和表头浮动效果(扩展SortTable)

    一.SortTable说明 SortTable version 2 7th April 2007 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Instructions: Download this file Add <script src="sorttable.js"></script> to your HTML Add class="sortable"

  • 如何制作浮动广告 JavaScript制作浮动广告代码

    如果有一定的JavaScript基础,制作浮动广告还是比较容易的.直接上代码了: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • javascript实现div浮动在网页最顶上并带关闭按钮效果实例

    复制代码 代码如下: <html> <head> <title>javascript实现div浮动在网页最顶上并带关闭按钮效果实例</title> <style type="text/css"> <!-- body { margin: 0px;padding: 0px;text-align: center;} TD {FONT-SIZE: 12px; COLOR: #333;} #toubiao {BORDER-BOTT

随机推荐