Home > Article > Web Front-end > 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

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

韦小宝Original: 2018-01-11 10:15:441921browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS method to implement click cycle switching to display contentNext article：JS method to implement click cycle switching to display content

See more

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

Related articles