遮罩层 div弹出层

最新推荐文章于 2020-09-23 09:46:29 发布
最新推荐文章于 2020-09-23 09:46:29 发布
阅读量493 收藏
点赞数
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s09122289/article/details/38980545
版权

全页面遮罩层 & 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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title>LIGHTBOX EXAMPLE</title>
<style>
* { margin:0; padding:0}
html, body { height: 100%; width: 100%; font-size:12px}
.white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; padding: 6px 16px; border: 12px solid #D6E9F1; background-color: white; z-index:1002; overflow: auto;}
.black_overlay { display: none; position: absolute;top:0%;left:0%;width:100%;height:100%;  background-color:#f5f5f5; z-index:1001; -moz-opacity: 0.8; opacity:0.8; filter: alpha(opacity=80);}
.close { float:right; clear:both; width:100%; text-align:right; margin:0 0 6px 0}
.close a { color:#333; text-decoration:none; font-size:14px; font-weight:700}
.con { text-indent:1.5pc; line-height:21px}
</style>

<script>
function show(tag){ 
 var light=document.getElementById(tag); 
 var fade=document.getElementById('fade');//遮罩层
 fade.style.width = document.documentElement.scrollWidth; //设置为全页面
 fade.style.height = document.documentElement.scrollHeight; 
 light.style.display='block'; 
 fade.style.display='block'; 
}

function hide(tag){ 
 var light=document.getElementById(tag); 
 var fade=document.getElementById('fade'); 
 light.style.display='none'; 
 fade.style.display='none';
}
</script>
</head>

<body>
<a href="javascript:void(0)" οnclick="show('light')">打开1</a>
<a href="javascript:void(0)" οnclick="show('light2')">打开2</a>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>
<div>
123424235
</div>

<div id="light" class="white_content">    
 <div class="close">
  <a href="javascript:void(0)" οnclick="hide('light')"> 关闭</a>
 </div>
        <div class="con">
         内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
  容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
  内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
  容内容内容内容内容       
 </div>
</div>
<div id="light2" class="white_content">
 <div class="close">
  <a href="javascript:void(0)" οnclick="hide('light2')"> 关闭</a>
 </div>
 <div class="con">
        内容2       
 </div>
</div>
<div id="fade" class="black_overlay">
</div>

</body>
</html>


 

s09122289
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js弹出div并显示遮罩层
12-09
代码如下: //——————–弹出层——————- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { ...
div遮罩层
热门推荐
黎小小的博客
07-05 1万+
实现遮盖层，使一部分区域不可点击编辑等。 1.简易遮罩层一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, i...
利用div实现遮罩层效果
w36680130的博客
12-25 1415
本文转载自：https://www.cnblogs.com/dige1993/p/4606032.html 作者：dige1993 转载请注明该声明。利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素，典型的例子就是百度的登录界面。下面贴出示例代码： <!DOCTYPE html> <html> <head> <meta ...
div弹出框加遮罩完整版，复制粘贴就能用
请告诉他
09-23 1357
先上效果，后面的代码为了让样式复制不那么麻烦，我尽量多写在行内 上一版本比较复杂，结合了js ，ajax请求和诸多交互的js代码 点击了解上一版本 这版本是js只管弹出窗体以及遮罩 /** * 点击弹出框的地方 */ function moreWhInfo() { $("#MyDiv").show();//弹出窗体 $(".mask").show(); //遮罩层 }; //关闭弹出层 $(".closeBtn").click(function () { ..
div+js 弹出层
ZXL工作室
08-10 1477
jQuery弹出层效果 .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(opa
弹出div遮罩层
weixin_34323858的博客
04-11 103
2019独角兽企业重金招聘Python工程师标准>>> ...
html 锁定页面(js遮罩层弹出div效果)
10-29
html 锁定页面(js遮罩层弹出div效果)，需要的朋友可以参考下。
jQuery+html5实现div弹出层并遮罩背景
10-24
今天在项目中用到了一个很好的div弹出层效果，jQuery+html5实现div弹出层并遮罩背景，效果非常棒，拿出来和大家一起分享！
vue 弹出遮罩层样式实例
01-21
以前做遮罩层都是写最小高度来占满屏，但是总会出现问题，也没改变，今天一个人在交流群上问这个时，看到一个回答解决了我这一个bug，学到了，现在记录一下样式。 <div class=’popContainer’></div> div....
Div 弹出 DIV移动 遮罩层 Div对话框 Div窗口
12-21
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框，JS源代码
JS遮罩层完美弹出Div(滚动条不可动)
12-11
用JS遮罩层完美弹出Div，并且滚动条完美屏蔽掉。。绝对是您完美的学习例子
JS弹出Div、遮罩层(滚动条不可动)
07-29
JS弹出Div+遮罩层,弹出遮罩后滚动条不可滚动。
js弹出层、遮罩、div层的几种效果
rockstar541的专栏
10-16 256
第一种：弹出层、遮罩层、div层 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd "&gt; &lt;HTML xmlns="http://www.w3.org/1999/xhtml"&g...
Js 计算上一个月的月份
s09122289的专栏
10-24 1504
var date = new Date();//根据现在的日期计算上一个月的月份 if(date.getDate()>27) date.setDate(date.getDate()-(date.getDate() - 26)); date.setMonth(date.getMonth() - 1); var month = date.get
Struts2 action get Excel
s09122289的专栏
02-06 508
jsp: Start Date: End  Date:
简单的下载
s09122289的专栏
11-27 329
JSP页面中，简单的文件下载~(weblogic&tomcat可用)   <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% response.setContentType("application/x-downlo
麦肯锡 组织 概述与基本框架gl.ppt
最新发布
05-05
麦肯锡 组织 概述与基本框架gl.ppt
jquery弹出div遮罩层
09-01
如果想要实现弹出div遮罩层，可以使用jQuery的相关功能来实现。 首先，需要在HTML文档中引入jQuery库，可以通过CDN或者下载并引入本地文件的方式。 然后，在HTML中创建一个div元素，作为遮罩层。可以通过给该元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值