2顶

浮出层居中效果

稿源：互联网 2022-06-22 02:52:36 点击： 1666 撤稿纠错

浮出层居中的效果，可自定义内容。

以下讨论的是和相关的浮出层居中效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xml:lang="zn" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<FCK:META http-equiv=content-type content="application/xhtml+xml; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<TITLE>浮动层居中效果，sky收集</TITLE>
<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(www_zzjs_net, sTitle, bCancel)
{
window.neatDialog = null;
this.elt = null;
if (document.createElement && document.getElementById)
{
    var dg = document.createElement("div");
    dg.className = "neat-dialog";
    if (sTitle)
      www_zzjs_net = '<div class="neat-dialog-title">'+sTitle+
              ((bCancel)?
                '<img src="x.gif" alt="Cancel" class="nd-cancel" />':'')+
                '</div>n' + www_zzjs_net;
    dg.innerHTML = www_zzjs_net;
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
    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);
    //adjust positioning if body has a margin
    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;
}
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function openDialog()
{
var www_zzjs_net = '欢迎各位来到站长特效网
有你们的支持，我们会做得更好
 <a href="http://www.zzjs.net">站长特效网</a>，专注于网页特效及广告代码。
'+
      '<button onclick="window.neatDialog.close()">关闭</button>
';
    new NeatDialog(www_zzjs_net, "噢噢噢，这个是弹出的层，欢迎来到站长特效网", false);
}
</SCRIPT>
<BODY>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<H1>浮动层居中效果，sky提示您，点击下面按钮看效果。</H1>
<BUTTON onclick="openDialog()">点此演示效果</BUTTON>
</BODY>
</HTML>

关于浮出层居中效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016308962461.shtml方便下次再访问哦。

·上一篇： 可隐藏和移动的图层
·下一篇： 双击关闭弹出层效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

浮出层居中效果

文章分类LIST >>返回首页

最新游戏

最新新闻