css 遮罩层简单应用

红太狼 2021-10-14 06:32 417阅读 0赞

html

<input id="btnshow" type="button" value="Show" onclick="showdiv();">
    <div id="bg"></div>
    <div id="show">测试
        <input id="btnclose" type="button" value="Close" onclick="hidediv();">
    </div>

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;
    }

js

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';
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，417人围观）

还没有评论，来说两句吧...

相关阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 320 阅读

相关 HTML/CSS 遮罩层登录框

HTML/CSS 遮罩层登录框代码： <!DOCTYPE html> <html lang="en"> <head>

秒速五厘米/ 2022年12月31日 13:19/ 0 赞/ 210 阅读

相关 JS+CSS简单实现DIV遮罩层显示隐藏

http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html [JS+CSS简单实现DIV遮罩层显示隐藏]

忘是亡心i/ 2022年07月16日 08:15/ 0 赞/ 288 阅读

相关遮罩层的实现及应用

遮罩层的实现： 1、实现思路：利用div实现遮罩层效果：利用一个全屏、半透明的div遮住页面上其它元素 <!DOCTYPE html> <html>

水深无声/ 2022年06月16日 06:51/ 0 赞/ 277 阅读

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 301 阅读

相关 CSS实现遮罩层

<div id="main"> <button @click="open">open</button> <div cl

短命女/ 2022年05月26日 13:44/ 0 赞/ 323 阅读

相关 css实现缕空遮罩层

最新更新时间：2019年05月13日13:41:01 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：页面镂空遮罩层、页面镂空遮罩

柔情只为你懂/ 2022年02月01日 04:29/ 0 赞/ 327 阅读

相关 js实现的简单遮罩层

超级简单的一个实现，可能会有局限性，贵在简单易懂，使用的时候执行前loading,执行成功后loaded / 显示loading遮罩层 /

女爷i/ 2021年12月22日 18:43/ 0 赞/ 309 阅读

相关 css 遮罩层简单应用

html <input id="btnshow" type="button" value="Show" onclick="showdiv();"> <div

红太狼/ 2021年10月14日 06:32/ 0 赞/ 418 阅读

相关遮罩层代码

1. 目的 : 直接复制来用, 加快工作效率 <div class="cover"></div> .cover{

我会带着你远行/ 2021年09月17日 04:18/ 0 赞/ 514 阅读