JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

最新推荐文章于 2024-11-13 17:27:29 发布
最新推荐文章于 2024-11-13 17:27:29 发布
阅读量124 收藏
点赞数
文章标签： xhtml javascript ViewUI

<!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>
<title>DIV CSS遮罩层</title>
<script language="javascript" type="text/javascript">
function showdiv() {
document.getElementById("bg").style.display = "block";
document.getElementById("show").style.display = "block";
}
function hidediv() {
document.getElementById("bg").style.display = 'none';
document.getElementById("show").style.display = 'none';
}
</script>
<style type="text/css">
#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
#show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
</style>
</head>
<body>
<input id="btnshow" type="button" value="Show" οnclick="showdiv();" />
<div id="bg"></div>
<div id="show">测试
<input id="btnclose" type="button" value="Close" οnclick="hidediv();" />
</div>
</body>
</html>

weixin_33928467
关注
微信小程序tabbar消失_微信小程序tabBar底部导航 不显示问题解析
weixin_42634811的博客
01-17 2241
2019年十月八号转藏：版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/wy_Blog/article/details/64919874————————————————版权声明：本文为CSDN博主「wy_Blog」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接...
转藏：Perl 处理XML --XML::Parser::Expat
我为编程狂,我为外语狂
02-11 3416
当在Perl中使用XML时，你会有将近五百个CPAN模块可以选择，每一个都支持整合Web服务的不同方面。此外，Perl的核心库包括多个支持XML的模块。这篇文章就关注于一个最早期且涉及最频繁的核心模块：XML::Parser. XML::解析器系列 最初的Perl解析器XML::Parser::Expat由Larry Wall在几年前编写并由Clark Cooper保持延续。模块作为Expat X
JS实现各种动态显示隐藏div效果
01-10
JS实现各种动态显示隐藏div效果，包括卷动显示隐藏效果，渐变显示隐藏效果，大小缩放显示隐藏效果
JS编写类似弹出窗口样式显示层
anxingshe3043的博客
07-31 126
JSp中增加div <!-- 提交变更申请 --> <div id="changeWindow" class="easyui-window" data-options="title:'提交变更申请',collapsible:false,minimizable:false,maximizable:false,modal:true" closed="t...
CSS+JS实现DIV蒙板效果
yoyo990dl的专栏
11-14 354
  点击Show covert DIV,弹出popWindow窗口,背景被透明蒙板覆盖,下层内容操作失效,代码如下:   &lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;    .popWindow{        text-align: center;        z-index:2;        width:500px; ...
JS+CSS简单实现DIV遮罩层显示隐藏
12-13 4904
DIV CSS遮罩层 function showdiv() { document.getElementById("bg").style.display = "block"; document.getElementById("show").style.display = "block";
HTML实现遮罩层的方法 HTML中如何使用遮罩层
同学小江的博客
12-23 5317
Web页面中使用遮罩层，可防止重复操作，提示loading；也可以模拟弹出模态窗口。 实现思路：一个DIV作为遮罩层，一个DIV显示loading动态GIF图片。在下面的示例代码中，同时展示了如何在iframe子页面中调用显示和隐藏遮罩层。 示例代码： index.html XML/HTML Code复制内容到剪贴板 >  html lang="zh-CN">  head>
html+遮罩未隐藏,页面用一个遮罩层显示加载，加载完后隐藏该div
weixin_30600605的博客
06-02 287
.progressBar {display: block;width: 65px;height: 65px;top: %;left: %;margin-left: -74px;margin-top: -14px;padding: 10px;text-align: left;line-height: 27px;font-weight: bold;position: fixed;z-index: ;}...
拉开幕布css,js+css简单效果（幕布，跑马灯）
weixin_32521765的博客
08-03 728
2.js普通的盒子，css的优先级css的优先级！important >>>>> style 行内样式 >>>>> #id选择器 # >>>>>>>> calss选择器 .类 ：hover(猥类)>> p标签 属性选择 >> 继承 >> 默认...
div iframe 显示html,IE中iframe标签显示在DIV之上的问题解决方案
weixin_35801437的博客
07-03 519
在做网页时前端时，使用IE打开时会出现标题栏DIV被遮挡PDF遮挡，后在stackoverflow中查到是IE浏览器的问题：链接https://stackoverflow.com/questions/12911428/z-index-does-not-work-in-internet-explorer-with-pdf-in-iframe--以下是翻译：有一种方法可以用IE中的其他元素覆盖IE中的...
JavaScript数组去重（转藏） 2021-07-06
u012922417的专栏
07-06 106
JavaScript数组去重(12种方法，史上最全) <picture class="mr-2 d-sm-block d-none" style="box-sizing: border-box; display: block !important; margin-right: 0.5rem !important;"> image </picture> 沉静地闪光&lt...
angula *ngFor 下标【转藏】
u012922417的专栏
12-25 25
<ul> <li *ngFor="let item of items; let i = index"> {{item}} <i (click)="deleteThis(i)">x</i> </li> </ul> private items = ["张三","李四","王五","赵...
使用Redis+Flask维护动态代理池
01-31
文炳春秋 2020-09-08 | 57阅读 | 1转藏 转藏全屏朗读分享 展开全文 我们在爬虫时可能会遇到封IP的问题，那么利用代理就可以进行IP的伪装，然后进行爬虫的请求。我们有时会需要非常多的ip，那么维护一个代理池...
规范Word文件标准文字排版格式(收藏，以备后用).docx
11-04
### Word文档标准排版格式详解 #### 一、引言 在正式场合或者工作中，我们需要遵循一定的排版规范来制作Word文档，以确保文件的专业性和统一性。本文将详细介绍Word文档的标准排版格式，包括标题、正文、表格、图示...
【学习】【HTML】HTML、XML、XHTML
m0_61097007的博客
11-12 561
HTML (HyperText Markup Language) 是一种用于创建和展示网页的标准标记语言。它由一系列的元素组成，这些元素通过标签的形式来告诉浏览器如何显示内容。HTML5 是第五个主要版本的 HTML，旨在改进 Web 应用的功能和性能。引入了许多新特性，如语义化标签、多媒体支持、表单控件、本地存储等。XML 是一种用于存储和传输数据的标记语言。强调数据的结构化表示，要求所有标签必须正确闭合，并且区分大小写。
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 351
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 115
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Vue中的常用指令
m0_62388400的博客
11-12 937
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 648
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
如何编译 Cesium 源码
最新发布
ismartcube的博客
11-13 670
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值