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. SAP销售模块塑工常见问题和解决方案(自己收藏)

    当创建订单时出现提示不存在该产品层次,如图: 解决方案:将该物料正确的产品层次提供给创建物料主数据的相关人员,将其改正. 对于包装膜类物料,在创建完销售订单进行后续的动作时,如开票,发现没有带出相应的 ...

  2. SQL与Mongodb聚合的对应关系(举例说明)

    SQL中的聚合函数和Mongodb中的管道相互对应的关系: WHERE $match GROUP BY $group HAVING $match SELECT $project ORDER BY $s ...

  3. Python之路 day3 全局变量、局部变量

    #!/usr/bin/env python # -*- coding:utf-8 -*- #Author:ersa """ 全局与局部变量 在子程序中定义的变量称为局部变 ...

  4. [WPF]ComboBox.Items为空时,点击不显示下拉列表

    ComboBox.Items为空时,点击后会显示空下拉列表: ComboBox点击显示下拉列表,大概原理为: ComboBox存在ToggleButton控件,默认ToggleButton.IsChe ...

  5. 即时聊天IM之一 XMPP协议简述

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q  Q:408365330     E-Mail:egojit@qq.com  综述: ...

  6. thinkPHP 标题

    在控制器中 $this->meta_title='标题'; 在对应模板中 {$meta_title} 可以这样对模板中的变量直接进行赋值

  7. hive外部表的建立与数据匹配

    1.建立hive的外部表匹配hdfs上的数据 出现如下报错: hive (solar)> ; OK Failed with exception java.io.IOException:java. ...

  8. jrebel注意事项

    -Xms2048m -Xmx2048m -XX:MaxPermSize=4096m -noverify -javaagent:C:\Users\Administrator\.IntelliJIdea2 ...

  9. MySql创建树结构递归查询存储过程

    在实现F2工作流底层多数据库支持时发现Oracel和mssql都有提供递归子查询,而MySql却没有,没办法需要自己构建存储过程来提供这个递归子查询的功能. -- 当前节点及子节点 -- 参数说明:i ...

  10. ADO总结测试数据库

    create database ADO测试 go use ADO测试 go create table Student ( Code ) not null primary key,--学生编号,主键 N ...