JQuery遮罩层

最新推荐文章于 2025-03-16 13:57:47 发布

最新推荐文章于 2025-03-16 13:57:47 发布 · 102 阅读

文章标签：

#jQuery #CSS #JavaScript #XHTML #HTML #ViewUI

JavaScript练习专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现遮罩层的方法。通过JavaScript动态创建并控制遮罩层显示与隐藏，适用于网页中需要遮罩效果的场景。

以下是截图：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
 <HEAD>
  <TITLE>遮罩层效果</TITLE>
	<style type="text/css">
		.mask {
			padding : 0px ;
			margin : 0px ;
			background : #555 ;
			position : absolute ;
		}
	</style>

	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(function(){
			Mask.load() ;
		}) ;

		var Mask = function(){
			function load(){
				var jq = _render() ;
				$("body").click(function(){
					unload(jq) ;
				}) ;
			} ;
			function unload(jq){
				jq.remove() ;
			} ;
			function _render(){
				var _div = $("<div></div>")
								.addClass("mask")
								.appendTo("body") ;
				var _css = _getCss() ;
				_div
					.css(_css)
					.fadeIn() ;
				return _div ;
			} ;
			function _getCss(){
				var css = {
					display : "none" ,
					top : 0 +  "px" ,
					left : 0 + "px" ,
					width : document.documentElement.clientWidth + "px" ,
					height : document.documentElement.clientHeight + "px" ,
					zIndex : 9999 ,
					opacity : 0.6
				} ;
				return css ;
			} ;
			return {
				load : load ,
				unload : unload
			} ;
		}() ;
	</script>
 </HEAD>

 <BODY>
  
 </BODY>
</HTML>