遮罩层

最新推荐文章于 2024-08-30 22:17:40 发布
最新推荐文章于 2024-08-30 22:17:40 发布
阅读量73 收藏
点赞数
分类专栏： javascript 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/j_sun150/article/details/84509281
版权

<style type="text/css">      

      #BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}

      

      #DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}

      #DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}

      #DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}

      #DialogDiv .form{padding:10px;}

</style>

 

 

<script type="text/javascript">

function ShowDIV(thisObjID) {

 

          $("#BgDiv").css({ display: "block", height: $(document).height() });

          var yscroll = document.documentElement.scrollTop;

          $("#" + thisObjID ).css("top", "100px");

          $("#" + thisObjID ).css("display", "block");

  

      }

 

      function closeDiv(thisObjID) {

          $("#BgDiv").css("display", "none");

          $("#" + thisObjID).css("display", "none");

      }

 

</script>

 

 

 

jsp代码

 

<div id="BgDiv"></div>

  

  <!--遮罩层显示的DIV1-->

  <div id="DialogDiv" style="display:none">

    <h2>弹出层<input type="button" value="关闭" onclick = "closeDiv('DialogDiv')"/></h2>

   <div class="form">我是弹出对话框111111！！</div>

  </div> 

  <p>

   <input value="弹出遮罩层1" type="button" id="btnShow1" οnclick="ShowDIV('DialogDiv')" />

  </p>

  

<!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=gb2312" />

  <title>Jquery遮罩层</title>

  

  <style type="text/css">      

      #BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}

      

      #DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}

      #DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}

      #DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}

      #DialogDiv .form{padding:10px;}

      

      #DialogDiv2{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}

      #DialogDiv2 h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}

      #DialogDiv2 h2 a{position:absolute; right:5px; font-size:12px; color:#000000}

      #DialogDiv2 .form{padding:10px;}

      

      #DialogDiv3{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}

      #DialogDiv3 h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}

      #DialogDiv3 h2 a{position:absolute; right:5px; font-size:12px; color:#000000}

      #DialogDiv3 .form{padding:10px;}

  </style>

  

  <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>

  <script language="javascript" type="text/javascript">

   function ShowDIV(thisObjID) {

          $("#BgDiv").css({ display: "block", height: $(document).height() });

          var yscroll = document.documentElement.scrollTop;

          $("#" + thisObjID ).css("top", "100px");

          $("#" + thisObjID ).css("display", "block");

    document.documentElement.scrollTop = 0;

      }

 

      function closeDiv(thisObjID) {

          $("#BgDiv").css("display", "none");

          $("#" + thisObjID).css("display", "none");

      }

 </script>

  

 </head>

 

 <body>

  <div id="BgDiv"></div>

  

  <!--遮罩层显示的DIV1-->

  <div id="DialogDiv" style="display:none">

    <h2>弹出层<a href="#" id="btnClose" οnclick="closeDiv('DialogDiv')">关闭</a></h2>

   <div class="form">我是弹出对话框111111！！</div>

  </div>

  

  <!--遮罩层显示的DIV2-->

  <div id="DialogDiv2" style="display:none">

    <h2>弹出层<a href="#" id="btnClose2" οnclick="closeDiv('DialogDiv2')">关闭</a></h2>

   <div class="form">我是弹出对话框2222！！</div>

  </div>

  

  <!--遮罩层显示的DIV3-->

  <div id="DialogDiv3" style="display:none">

    <h2>弹出层<a href="#" id="btnClose3" οnclick="closeDiv('DialogDiv3')">关闭</a></h2>

   <div class="form">我是弹出对话框3333333！！</div>

  </div> 

  

  <p>

   <input value="弹出遮罩层1" type="button" id="btnShow1" οnclick="ShowDIV('DialogDiv')" />

   <input value="弹出遮罩层2" type="button" id="btnShow2"  οnclick="ShowDIV('DialogDiv2')" />

   <input value="弹出遮罩层3" type="button" id="btnShow3"  οnclick="ShowDIV('DialogDiv3')" />

  </p>

 </body>

</html>

j_sun150
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WEB遮罩层
pigZhangBoFei的博客
09-09 607
【前言】WEB遮罩层 在这里插入代码片 .nav{ width: 50vw; height: 10vh; background: red; } .main{ width: 500px; height: 500px; background: yellow; margin: 100px auto; display: no...
遮罩层插件
gztrljh
03-18 187
css <link href="{{asset('lib/loaders.min.css')}}" rel="stylesheet"> html <div class="loader"> <div class="loader-inner ball-pulse loader-in"> <div></div> &lt
div遮罩层
热门推荐
黎小小的博客
07-05 1万+
实现遮盖层，使一部分区域不可点击编辑等。 1.简易遮罩层一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, i...
Winform 通用遮罩层
你要明白，任何问题都不是孤立存在的，一定有人曾经遇到过，并且已经有更好的解决办法了，只是我还不知道。我不应该在黑暗中独自前行，去重新发明轮子，也许我的顿悟，只是别人的基本功！我应该要站在巨人的肩膀上，学习更成熟的经验和方法，然后再来解决这个问题
11-24 1330
winform遮罩层
vue 遮罩层
zhoulijia666的博客
12-01 475
- 遮罩层 -
点击遮罩层的背景关闭遮罩层
01-08
class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩
vue 弹出遮罩层样式实例
10-15
在Vue应用中，有时我们需要实现一个弹出遮罩层的功能，通常用于显示对话框、加载指示器或者阻止用户在特定操作期间与页面交互。本篇文章将深入探讨如何在Vue中创建一个全屏的、响应式的遮罩层，并解决在实现过程中...
HTML实现遮罩层的方法 HTML中如何使用遮罩层
09-28
在提供的代码中，可以看到一个`<div>`元素被赋予了`id="overlay"`，这个元素就是我们的遮罩层。为了使其具有遮罩效果，我们需要在CSS中定义其样式。例如： ```css #overlay { position: fixed; top: 0; left: 0;...
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
01-19
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能。分享给大家供大家参考，具体如下： 弹出层：两种方式 一是打开网页就自动弹出层 二是点击弹出 <!DOCTYPE ...
微信小程序-自定义组件-遮罩层
05-05
遮罩层，也称为蒙层，是一种常见的UI元素，用于在页面上创建半透明的覆盖层，通常用于显示弹窗、加载提示或者进行用户交互时提供背景效果。在此，我们将深入探讨如何在微信小程序中创建和使用自定义遮罩层组件。 ...
使用itextpdf5.x将网页转为PDF,并添页眉页脚页码
qingqingzijinxin的专栏
08-23 340
itextpdf，html转pdf
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 9520
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
jQuery基础——DOM
m0_54066656的博客
08-27 1807
JQ基础——DOM操作
vue ref和reactive区别
灰海
08-25 4916
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 1236
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 649
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 165
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
echarts组件——饼图
weixin_42255789的博客
08-28 274
饼图
SpringBoot SSM vue在线作业考试系统
最新发布
yinjl123456的博客
08-30 290
使用技术: SpringBoot或SSM + Mybaits + Mysql + vue(前端)后台管理 登录注册 个人中心 教师信息管理 学生信息管理 学院信息管理 专业信息管理。班级信息管理 作业信息管理 作业提交管理 通知公告管理 试卷管理 试题管理。系统管理 管理员管理 考试管理。
移动端SCSS遮罩层实现与问题解析
"本文主要探讨了在SCSS中如何实现移动端页面的遮罩层效果，以及解决相关问题。文中提供了一个兼容安卓4.0.4+的实例，并分析了传统遮罩层与弹窗作为兄弟元素的设计原因。作者提出，由于现代移动端已广泛使用rgba，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值