DIV+CSS+JS 变灰弹出层

浮动层居中的对话框效果演示

浮动层居中的对话框效果演示

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
}

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 = '

'+sTitle+
((bCancel)?
'':'')+
'

\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);

//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;
}

function openDialog()
{

var sHTML = '

你现在看到的是一个层窗口，是被JS控制弹出的，www.jb51.net我们！

'+
'

关闭

';
new NeatDialog(sHTML, "欢迎光临!", false);

}

浮动层居中的效果


点此演示效果

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript简易动画类(div渐变)

    程序源码 复制代码 代码如下: function Animate(el, prop, opts) { this.el = el; this.prop = prop; this.from = opts.from; this.to = opts.to; this.time = opts.time; this.callback = opts.callback; this.animDiff = this.to - this.from; } Animate.prototype._setStyle = fu

  • JS+CSS实现Div弹出窗口同时背景变暗的方法

    本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现的Div弹出窗口,同时背景变暗</title> <script>     function    locking(){      document.all.ly.style.display="block";      document.all.

  • JS+CSS实现带关闭按钮DIV弹出窗口的方法

    本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> <script>     function locking(){      document.all.ly.style.display="block";      document.all.ly.sty

  • js+CSS实现弹出居中背景半透明div层的方法

    本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

    本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • 无js5款纯div+css制作的弹出菜单标准

    一.最基本的:二级dropdown弹出菜单 二级dropdown弹出菜单--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; mar

  • JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

    本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!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">

  • js实现按钮颜色渐变动画效果

    js实现按钮颜色渐变动画效果

    本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&

  • DIV+CSS+JS 变灰弹出层

    浮动层居中的对话框效果演示 浮动层居中的对话框效果演示 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%; P

  • Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top

  • js写一个弹出层并锁屏效果实现代码

    复制代码 代码如下: <!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"> <head> <meta http-equiv=&qu

  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 复制代码 代码如下: <!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//*

  • jQuery Mobile弹出窗、弹出层知识汇总

    先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-position-to="window" data-dismissible="false"> <a href='javascript:void(0)' data-rel="ba

  • jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示       源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以

  • jquery三个关闭弹出层的小示例

    在开发应用中我们做了一个弹出层,有时我们会做一个关闭按钮,这样点击关闭就可以把弹出层关闭了,但是有时希望只要不点击弹出层内就自动关闭弹出层了,下面我总结了三个实例.例1 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml

  • jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

    jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

    本文实例讲述了jQuery实现带遮罩层效果的blockUI弹出层.分享给大家供大家参考,具体如下: 首先先附上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:

  • 通用弹出层页面(兼容IE、firefox)可关闭控制宽高及屏蔽背景

    <%...@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %> <%.../* 通用弹出层页面(兼容IE.firefox) 说明: 1.openWindows(width,height)----打开弹出层调用的函数,可控制层的宽度和高度 2.hiddenWindows(

  • vue3弹出层V3Popup实例详解

    vue3弹出层V3Popup实例详解

    Vue3-Popup 基于vue3构建的手机端自定义弹层组件. 一款集合了msg.alert.dialog.modal.actionSheet.toast等多种效果的Vue3自定义弹层组件.支持上下左右弹出.圆角.自定义弹层样式.多按钮及长按/右键功能. 引入v3popup // 在main.js中全局引入 import { createApp } from 'vue' import App from './App.vue' // 引入弹窗组件v3popup import V3Popup fro

随机推荐