jQuery implements the function example of automatically popping up the mask layer when opening a web page or popping up the mask layer when clicking on it-JS Tutorial-php.cn

jQuery implements the function example of automatically popping up the mask layer when opening a web page or popping up the mask layer when clicking on it

韦小宝

Release： 2018-01-11 10:15:44

Original

1925 people have browsed it

This article mainly introduces the function of jQuery to automatically pop up the mask layer when opening a web page or click to pop up the mask layer. It involves related operation skills of jQuery event response and window element attributes. Friends who are interested in jquery can refer to this article. Article

The example of this article describes how jQuery can realize the function of automatically popping up the mask layer when opening a web page or clicking to pop up the mask layer. Share it with everyone for your reference, the details are as follows:

Pop-up layer: two methods

One is to automatically pop up the layer when opening the web page
The second is to click to pop up

<!DOCTYPE html>
<html>
<head>
<title>www.php.cn - jQuery简便实现遮罩层</title>
<meta charset="utf-8">
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
}
#main {
height:1800px;
padding-top:90px;
text-align:center;
}
#fullbg {
background-color:gray;
left:0;
opacity:0.8;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=80);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px solid rgba(0,0,0, 0.8);
height:400px;
left:50%;
margin:-200px 0 0 -200px;
padding:1px;
position:fixed !important; /* 浮动对话框 */
position:absolute;
top:50%;
width:400px;
z-index:5;
border-radius:5px;
display:none;
}
#dialog p {
margin:0 0 12px;
height:24px;
line-height:24px;
background:#CCCCCC;
}
#dialog p.close {
text-align:right;
padding-right:10px;
}
#dialog p.close a {
color:#fff;
text-decoration:none;
}
</style>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
 showBg();
});
</script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
  var bh = $("body").height();
  var bw = $("body").width();
  $("#fullbg").css({
    height:bh,
    width:bw,
    display:"block"
  });
 $("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
</head>
<body>
<p id="main"><a href="javascript:showBg();" rel="external nofollow" >点击这里查看效果</a>
<p id="fullbg"></p>
<p id="dialog">
  <p class="close"><a href="#" rel="external nofollow" onclick="closeBg();">关闭</a></p>
  <p>正在加载，请稍后....</p>
</p>
</p>
</body>
</html>

Copy after login

The above is all the content of this article, as well as the source code. Hope it helps everyone learn!

Related recommendations:

About jQuery scrolling plug-in scrollable.js usage analysis

jQuery user avatar cropping plug-in cropbox.js example sharing

Sharing the differences between jquery and js in realizing the select all function

The above is the detailed content of jQuery implements the function example of automatically popping up the mask layer when opening a web page or popping up the mask layer when clicking on it. For more information, please follow other related articles on the PHP Chinese website!