style:

.black_overlay{

            display: none;

            position: absolute;

            top: 0%;

            left: 0%;

            width: 100%;

            height: 100%;

            background-color: #696969;

            z-index:;

            -moz-opacity: 0.8;

            opacity:.80;

            filter: alpha(opacity=88);

        }

        .white_content {

            display: none;

            position: absolute;

            top: 25%;

            left: 25%;

            width: 55%;

            height: 55%;

            padding: 20px;

            border: 10px solid #ddd;

            background-color: white;

            z-index:;

            overflow: auto;

        }

html:

 <p>示例弹出层:<BUTTON onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</BUTTON></p>
<div id="light" class="white_content"> 这是一个层窗口示例程序.
<BUTTON onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</BUTTON>
</div>
<div id="fade" class="black_overlay"></div>

点击按钮跳出隐藏的div层,并设背景。的更多相关文章

  1. 点击按钮弹出一个div层

    JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  2. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  3. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

  4. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. javascript 点击按钮实现隐藏显示切换效果

    原文链接:http://www.jb51.net/article/79083.htm <html> <head> <meta charset="gb2312&q ...

  6. 点击按钮对两个div的隐藏与显示进行切换

    HTML: <button type="button"  id="showHidden">点击切换div的隐藏与显示</button> ...

  7. 点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】

    点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" ...

  8. JS 点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. java中String对象的split方法

    在java.lang包中有String.split()方法,返回是一个String[]数组,今天碰到一个自己没注意的问题: 1.特殊分隔符 String str1 = "123|456|78 ...

  2. 第四周作业-yjw

    运动策略分析 首先我们可以得到我方击球手质心的位置,球的质心的位置,对方球门中心位置.同时以桌面边缘为坐标轴,建立笛卡尔坐标系.可以明确的一点是,击球手的运动为曲线,球进框的运动为直线,或者折线. 击 ...

  3. JS基本概念

    1.一切(变量.函数名.操作符)都区分大小写 2.标识符:第一个字符必须为字母.下划线或者美元符号,其他字符可以是字母.下划线.美元符号或者数字 3.数据类型 1)undefined:用var声明的变 ...

  4. java 平面上最近两个点之间的距离

    public class ClosestPair{ public static void main(String[] args) { float[][] a = new float[][]{{3, 3 ...

  5. c#连接vertica数据库

    项目前期使用mysql数据库,大约每天200w数据量,十天1500w数据量之后,读取写入都会很慢,而且经常锁表,后来采用vertica数据库,下面分享vertica数据库使用方法,以及大批量数据快速写 ...

  6. ajax 参数有中文

    虽然很少会有这种情况,但是既然遇到了就记录一下.一般发请求的话如下 $.ajax({ url: "", type: 'get', data: {'name': val}, data ...

  7. [转]http-关于application/x-www-form-urlencoded等字符编码的解释说明

    在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...

  8. jquery触屏幻灯片

    一.前言 去年接触了移动Web开发,做了些手机端的网站及应用,还有些小的微信游戏和活动页面.每个项目里或多或少的都会有一些触屏事件等.其中有两个用到了jquery触屏幻灯片.刚开始的时候也在百度上搜索 ...

  9. ASP.NET MVC为字段设置多语言显示 [转]

    这段时间一直在忙.NET的项目,今天就写一下关于.NET的文章吧,也很长时间没写过.NET的啦  在使用ASP.NET MVC3 的时候,使用元数据模式可以非常方便地设置每个 字段(或者说属性)以减少 ...

  10. IOS开发之画图形

    1 画线 2 画线第二个方法  相对方法1简洁 3 矩形 4 圆 5 弧线 6画文字(略) 7 画图片(略)