點選彈出鎖屏層例項程式碼

admin發表於2017-03-12

所謂的鎖屏效果就是彈出一個遮罩層，在遮罩層之下的元素將不能夠再被操作，這樣的效果在網頁中經常會被用到，比如彈出一個警告視窗或者註冊視窗，後面帶有半透明遮罩層效果，下面就通過程式碼例項介紹一下如何彈出一個全屏的遮罩層。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{text-align:center}
a{
  text-decoration:none;
  color:green;
  font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>  
<script type="text/javascript"> 
$(document).ready(function(){ 
  $('a').click(function(){ 
    var w=$(document).width(); 
    var h=$(document).height(); 
    $('body').prepend('<div id="zhezhaoc"></div>'); 
    $('#zhezhaoc').css({ 
      'width':''+w+'px', 
      'height':''+h+'px', 
      'background-color':'#000000', 
      'z-index':'1100', 
      'opacity':'0.5', 
      'position':'absolute', 
      'top':'0px', 
      'left':'0px' 
     }); 
  })
}) 
</script> 
</head> 
<body> 
<a href="#">檢視效果</a> 
</body> 
</html>

以上程式碼實現了我們的要求，點選可以彈出一個全屏遮罩層效果，下面簡單介紹一下它的實現原理。

原理非常的簡單，下面分佈介紹一下:

1.建立一個全屏尺寸的div元素:

[JavaScript] 純文字檢視 複製程式碼
var w=$(document).width(); 
var h=$(document).height();

2.這div位於頁面其他元素之上:

既然能夠實現鎖屏，那麼div就要位於所有的元素之上，那麼就要設定它為絕對定位，當然這裡是用過jQuery的css()方法實現的。

[JavaScript] 純文字檢視 複製程式碼
$('#zhezhaoc').css({ 
  'width':''+w+'px', 
  'height':''+h+'px', 
  'background-color':'#000000', 
  'z-index':'1100', 
  'opacity':'0.5', 
  'position':'absolute', 
  'top':'0px', 
  'left':'0px'
});

需要主要的是，給予此div一個很大的z-index屬性值，以確保遮罩層能夠位於其他元素之上。

相關文章