<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http:///tr/xhtml1/dtd/">
<html xmlns="http:///1999/xhtml">
<head>
<title>jquery can easily implement masking layer--I</title>
<script type="text/javascript" src="jquery/jquery-1.10."></script>
</head>
<body>
<div ><input type="button" onclick="show_www.()" value="Show mask layer" /> After displaying the mask layer, click on the upper right corner to close</div>
<div ></div>
<div >I</div>
<div ></div>
<div >keleyi</div>
<div ></div>
<div >I</div>
<div >I Back to top</div>
<div >a</div>
<div >jquery</div>
<div ><a href="https:///a/bjac/" target="_blank">Original text</a></div>
<div ></div>
<div >Complete Code</div>
<div ><div >
<ul>
<li class="ll"><a href="https:///" >Single-line text intermittently</a></li>
<li><a href="https:///" >jquery ui modify title bubble</a></li>
<li><a href="https:///" >jquery clears textarea and other input boxes</a></li>
<li><a href="https:///" >jquery light-off effect</a></li>
<li><a href="https:///" >Can change the size of the div layer</a></li>
</ul>
<div class="lb"><a href="https:///jquery/" target="_blank">jquery</a> <a href="https:///javascript/" target="_blank">javascript</a> <a href="https:///cms/" target="_blank">cms</a> </div>
</div></div>
<script type="text/javascript">
$("<div ><img src="https:///images/" /></div>").css({
position:"absolute",
top:0,
left:0,
backgroundcolor:"#004400",
opacity:0.5,
zindex:300
})
.height($(document).height())
.width($(document).width()).hide().appendto("body")
//When masking is needed
function show_www.() {
$("#div_brg_www.").show();
}
$("#close_ke"+"leyi_com").click(function () {
//When canceling the mask
$("#div_brg_www.").hide();
}
)</script>
</body>
</html>
Two jquery methods are used:
1. show(): If the selected elements have been hidden, then these elements are displayed.
grammar
$(selector).show(speed,callback)
speed
Optional. Specifies the speed at which elements can go from hidden to fully visible. The default is "0".
Possible values:
Milliseconds (such as 1500)
"slow"
"normal"
"fast"
With the speed set, the element gradually changes its height, width, margins, inner margins, and transparency as it hides to fully visible.
callback
Optional. The function to be executed after the show function is executed.
This parameter cannot be set unless the speed parameter is set.
Tip: If the element is already fully visible, the effect does not change any unless the callback function is specified.
Note: This effect works for elements hidden through jquery, or elements that declare display:none in css (but not for elements that visibility:hidden).
2. hide(): If the selected element has been displayed, hide the element.
grammar
$(selector).hide(speed,callback)
speed
Optional. Specifies the speed at which elements can be seen from hidden. The default is "0".
Possible values:
Milliseconds (such as 1500)
"slow"
"normal"
"fast"
When setting the speed, the element gradually changes its height, width, margin, inner margin and transparency as it is visible to hide.
callback
Optional. The function to be executed after the hide function is executed.
This parameter cannot be set unless the speed parameter is set.
Tip: If the element is already fully visible, the effect does not change any unless the callback function is specified.