<html>
    <head>
    <title>LIGHTBOX EXAMPLE</title>
    <meta charset="utf-8" />
    <style>
    .black_overlay
    {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
    }
    .white_content
    {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    }
    </style>
    </head>
    <body>
    <p>
    可以根据自己要求修改css样式
    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a></p>
    <button> asdfasd</button>
    <div id="light" class="white_content">
    This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
    Close</a></div>
    <div id="fade" class="black_overlay">
    </div>
    </body>
    </html>

div遮盖，弹出层的更多相关文章

  1. div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  2. div+js 弹出层

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

  3. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  4. 69.js--点击事件等比例弹出层div

    html:<!--弹出层导航栏--> <div class="public-nav-content"> <ul> <li><a ...

  5. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  6. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  7. JS简易弹出层

    目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...

  8. 【Javascript Demo】遮罩层和百度地图弹出层简单实现

    其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例:   2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...

  9. js弹出层的写法实例

    点击后弹出界面,通过判断浏览器长宽自动设定页面宽度和登陆页面位置. <style> /*遮罩层 弹出层*/ .mask { width: 100%; background-color: r ...

  10. layui弹出层处理（获取、操作弹出层数据等）

    要点: 字符串被渲染为弹窗层之后,回自动转换为DOM,可以使用jq进行各种操作 <!DOCTYPE html> <html> <head> <meta cha ...

随机推荐

  1. Redis入门指南之一（简介）

    1. 简介 Redis是一个开源的.高性能的.基于键值对的缓存与存储系统,通过提供多种键值数据类型来适应不同的场景下的缓存与存储需求.同时Redis的诸多高级功能使其可以胜任消息队列.任务队列等不同的 ...

  2. spring/java ---->记录和整理用过的注解以及spring装配bean方式

    spring注解 @Scope:该注解全限定名称是:org.springframework.context.annotation.Scope.@Scope指定Spring容器如何创建Bean的实例,S ...

  3. 问题处理：Library not loaded: /usr/local/opt/readline/lib/libreadline.7.dylib (LoadError)

    进入rails 文件夹, terminal输入rails console报告❌. 类似下面的 Running via Spring preloader Traceback (most recent c ...

  4. itchat和wordcloud对微信好友的签名进行画像

    获取好友列表的时候,返回的json信息中还看到了有个性签名的信息,脑洞一开,把大家的个性签名都抓下来,看看高频词语,还做了个词云. # coding:utf-8 import itchat # 先登录 ...

  5. windows service 2008 R2 安装net4.6环境失败，windows service 2008 R2 升级sp1问题

    一.错误 1.因为我的程序是以vs2017开发的,在windows service 2008 R2  IIS部署项目文件报出错误,因此要安装net4.6的环境. 2.windows service 2 ...

  6. SSH框架学习摸索记

    Unable to load configuration. - bean - jar:file:/E:/tomcat-7.0.11/webapps/struts/WEB-INF/lib/struts ...

  7. ALV基础二：ALV的扩展功能

    https://www.cnblogs.com/sapSB/p/8532072.html 参考这个,做扩展,有些人喜欢用OO ALV有些喜欢用普通的CALL FUNC ALV...我只用LVC... ...

  8. 数组去重复的时候遇到length变成1 的bug

    arrUnique:function(arr){ //传入空数组的时候有bug,length会变成1 所以修复下 if(arr.length == 0){ return []; } arr.sort( ...

  9. teamview修改id

     怎么修改 TeamViewer ID 呢?按照下列的操作步骤,就能很简单的改变TeamViewer的id哦!1. 开始 > 运行,录入%appdata%,删除TeamViewer的文件夹: ...

  10. Invalid demension,shape[-1,40,40,1]

    代码里定一个了没有用的placeholder, 或者说没有给这个placeholder 传值