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. excle表格生成网页

    用Dreamweaver可以方便生成和excle表格一样的代码. 复制excle,粘贴

  2. VB调用sendinput API

    http://files.cnblogs.com/files/liuzhaoyzz/VB%E8%B0%83%E7%94%A8sendinput_API.rar sendinput只支持发送字符或者组合 ...

  3. Perl--学习记录(实时更新)

    标量变量(varibale)以美元符号($)开头,这个符号也成为魔符(sigil).Perl通过魔符来区分它是什么类型的变量. Perl里面大部分变量名称习惯使用全小写.而使用全大写的(比如$ARGV ...

  4. 冰球项目日志1-yjw

    第一次小组讨论结果 功能需求分析 通过已知输入:球位置速度,击球手位置速度.确定输出:击球手击球时速度,击球点位置,击球手轨迹. 功能分解 1 通过当前的球位置速度,判断是否会进入我方球门,以判断是否 ...

  5. HADOOP命令介绍

    一.用户命令1.archive命令 (1).什么是Hadoop archives?Hadoop archives是特殊的档案格式.一个Hadoop archive对应一个文件系统目录. Hadoop ...

  6. 在linux上部署web环境

    1.升级python到2.7版本(通过源码包重新安装一个2.7版本的python):wget https://www.python.org/ftp/python/2.7.9/Python-2.7.9. ...

  7. Git常用命令速查表

  8. 【安全测试】WebGoat安装

    参考资料:http://wenku.baidu.com/link?url=Qg8GOqw6-CK92-3Dgrm608TlJjDtKMLU9ZlC73Js9LD2FZFgqdHEfJ2sTIRCae_ ...

  9. yii2-basic后台管理功能开发之三:自定义GridView列显示

    在第二篇 yii2-basic后台管理功能开发之二:创建CRUD增删改查 中,我们利用gii工具生成的结果一般并不是我们想要的结果. 我们需要根据自己的需求自定义列显示.我遇到的主要是一下变更: 时间 ...

  10. JavaWeb前端:JQuery

    Jquery基本概念 什么是Jquery Jquery是一个开源的,集成了Javascript,CSS,DOM,AJAX的前端框架:它诞生于2006年,最初是为了简化JavaScript开发而产生的, ...