Home > Developer > Web Develop
The benefit of masking layers is that you can mask the user's actions on the elements below the mask layer.
The principle of production is simple: 1 set Mask Layer trigger button 2 Set mask layer content 3 Set the matte layer background (focus on capturing the size of the content Div) 4 Set the Click Trigger button to mask the layer background content to show or hide at the same time.
The specific code is as follows:
1<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">2"http://www.w3.org/1999/xhtml">34<meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/>5<script type="Text/javascript"Src="Scripts/jquery.js"></script>6<title>demo</title>7<style type="Text/css">8 body{9font:12px Verdana, Arial, Helvetica, sans-serif;Ten } One . Mask { A Position:absolute; - top:0px; -Filter:alpha (opacity= -); thebackground-color: #B2B2B2; -Z-index:999; - left:0px; -Opacity0.5; +-moz-opacity:0.5; - } + . content{ A Display:none; at padding:25px 20px; - width:600px; - border:1px solid #b2b2b2; - background: #fff; -Z-index: +; -Positionfixed; inLeft -%; -Top -%; to } + . Content H3,.content p{ - padding:10px; thebackground:#888; * color: #fff; $ }Panax Notoginseng #close { - Cursor:pointer; thefont-size:20px; +color:#888; A Position:absolute; the top:5px; + right:20px; - } $ #open1 { $ width:90px; -color:# the; - Cursor:pointer; the padding:10px; -background:#888;Wuyi color: #fff; the } -</style> Wu<script type="Text/javascript"> - $ (function () { About$("#open1"). Click (function () { $$("#mask"). css ({ - "Height": $ (document). Height (), - "width": $ (document). Width () - }). Show (); A }) +$("#open1"). Click (function () { the$(". Content"). Show (); - }) $$("#close"). Click (function () { the$(". Content"). Hide (); the$("#mask"). Hide (); the }) the }) -</script> in the<body> the<div id="Mask" class="Mask"></div> About<div id="Open1"> Click Show Matte Layer </div> the the<ul> the<li> Web content </li> +<li> Web content </li> -<li> Web content </li> the<li> Web content </li>Bayi<li> Web content </li> the<li> Web content </li> the<li> Web content </li> -<li> Web content </li> -<li> Web content </li> the<li> Web content </li> the<li> Web content </li> the the</ul> -<divclass="content"> the the<p>the benefit of masking layers is that you can mask the user's actions on the elements below the mask layer. the<br>94 The principle of production is simple: 1 set Mask Layer trigger button 2 Set mask layer content 3 Set the matte layer background (focus on capturing the size of the content Div) 4 Set the Click Trigger button to mask the layer background content to show or hide at the same time. the</p> the<span id="Close">x</span> the</div>98</body> About：
Making lightweight masking layers in a jquery environment
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
