jQuery彈出遮罩層效果完整示例

2019-11-20 09:01:15

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery彈出遮罩層效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery 遮罩層</title><style type="text/css">/* 半透明的遮罩層 */#overlay {  background: #000;  filter: alpha(opacity=50); /* IE的透明度 */  opacity: 0.5; /* 透明度 */  display: none;  position: absolute;  top: 0px;  left: 0px;  width: 100%;  height: 100%;  z-index: 100; /* 此處的圖層要大于頁面 */  display:none;  _background-color:#a0a0a0; /* 解決IE6的不透明問題 */}</style><script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">/* 顯示遮罩層 */function showOverlay() {  $("#overlay").height(document.body.scrollHeight);  $("#overlay").width(document.body.scrollWidth);  // fadeTo第一個參數為速度，第二個為透明度  // 多重方式控制透明度，保證兼容性，但也帶來修改麻煩的問題  $("#overlay").fadeTo(200, 0.5);  // 解決窗口縮小時放大后不全屏遮罩的問題  // 簡單來說，就是窗口重置的問題  $(window).resize(function(){    $("#overlay").height(document.body.scrollHeight);    $("#overlay").width(document.body.scrollWidth);  });}/* 隱藏覆蓋層 */function hideOverlay() {  $("#overlay").fadeOut(200);}</script></head><body><button onClick="showOverlay();" style=" width:100px; height:60px; margin:40px auto 40px auto; display:block;">打開遮罩層</button><button onClick="hideOverlay();" style=" width:100px; height:60px; z-index:101; display:block; position:absolute; left:10px; top:10px;">關閉遮罩層</button><h3 align="center"><a href="http://www.survivalescaperooms.com/">閱誰問君誦，水落清香浮。</a></h3><div style="height:10000px;"></div><div id="overlay"></div></body></html>

運行效果圖如下：