弹框时背景变暗特效

小咪咪 2022-05-29 02:39 160阅读 0赞

<html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	
    		<title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title>
    		<meta http-equiv="content-Type" content="text/html;charset=gb2312">
    		
    		<style type="text/css">
    			.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: 3px solid orange;
    				background-color: white;
    				z-index: 1002;
    				overflow: auto;
    			}
    		</style>
    	</head>
    
    	<body>
    		
    		<a href="javascript:void(0)" οnclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">
    			点击这里打开窗口</a>
    		<div id="light" class="white_content">
    			<a href="javascript:void(0)" οnclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
    				关闭</a>
    			<br>窗口内容
    		</div>
    		<div id="fade" class="black_overlay"></div>
    	</body>
    
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关 uniapp显示提示框背景变暗_uniapp样式问题归纳总结

1.头部导航栏下拉弹框 ![20f4f30a0fc3d677cfa2b7a016efe3a6.png][] 单纯的下拉弹框，我们在很多组件中都可以找到，但是放在头部导航的位

绝地灬酷狼/ 2022年10月26日 14:07/ 0 赞/ 315 阅读

相关 html中弹框背景变暗,点击弹出窗口层，并且背景变暗渐变

点击弹出窗口层，并且背景变暗渐变---网页特效观止|www.jscode.cn|网页特效代码 body \{font-size:12px;background:\9EC7E7

水深无声/ 2022年10月10日 15:51/ 0 赞/ 78 阅读

相关 jquery鼠标移上图片变暗

<!doctype html> <html> <head> <meta charset="utf-8"> <title>hover</t

àì夳堔傛蜴生んèń/ 2022年09月26日 11:54/ 0 赞/ 192 阅读

相关 Android 窗体阻止变暗

阻止窗体变暗 getWindow().setFlags(WindowManager.LayoutParams.FLAG\_KEEP\_SCREEN\_ON,

客官°小女子只卖身不卖艺/ 2022年08月24日 15:27/ 0 赞/ 5 阅读

相关弹出窗口特效

弹出窗口 <!DOCTYPE html> <html> <head> <title>jQuery实例1：浮动窗口</title>

超、凢脫俗/ 2022年06月14日 10:54/ 0 赞/ 296 阅读

相关 ApacheMonitor.exe start按钮变暗

apache并没有做为windows服务启动-- ApacheMonitor.exe start按钮灰色 1)先找到Apache文件夹中bin目录下的apache.

客官°小女子只卖身不卖艺/ 2022年06月12日 14:13/ 0 赞/ 220 阅读

相关弹框时背景变暗特效

<html> <head> <meta charset="UTF-8"> <title></title>

小咪咪/ 2022年05月29日 02:39/ 0 赞/ 161 阅读

相关 JavaScript弹框

注意：弹窗使用反斜杠来换行![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG

系统管理员/ 2022年04月12日 05:40/ 0 赞/ 317 阅读

相关固定背景实现的背景滚动特效

日期：2013-5-19 来源：[GBin1.com][] ![固定背景实现的背景滚动特效][title.jpg] [在线演示][Link 1] 分享一个来自co

矫情吗；*/ 2022年02月16日 17:57/ 0 赞/ 244 阅读

相关 MyEclipse启动时弹出提醒框

1、 ![230914147677992.png][] MyEclipse has detected that less than 5% of the 31MB of PS

阳光穿透心脏的1/2处/ 2021年12月24日 00:51/ 0 赞/ 232 阅读