shadeBlock——基于jQuery的遮罩显示

最新推荐文章于 2022-07-21 09:40:42 发布

shufenghua

最新推荐文章于 2022-07-21 09:40:42 发布

阅读量147

点赞数

分类专栏： web前台习作文章标签： jQuery JavaScript Chrome CSS Firefox ViewUI

web前台习作专栏收录该内容

0 篇文章 0 订阅

订阅专栏

练习了一下遮罩效果的实现——基于jQuery。

在js禁用的情况下不影响页面显示效果，符合web标准，在firefox下出现了三个对号:)，在firefox3、chrome、ie6、ie7、ie8下面显示正常。

欢迎下载使用： shadeBlock

如果需要更炫的效果，请选用lightBox , 或者tinyBox 。

引用部分：

<script type="text/javascript" language="javascript" src="./script/jquery.js"></script>
<script type="text/javascript" language="javascript" src="./script/shadeBlock.js"></script>
<link href="./style/shadeBlock.css" type="text/css" rel="stylesheet" />

调用很简单：

// 本网页影藏元素，格式：$("#触发元素的id").shadeBlock(width, height, "#要显示的元素id", "title");
$("#loginFormTrigger").shadeBlock(300, 140, "#loginForm", "Login Form");

// 其他网域元素，格式：$("#触发元素的id").shadeBlock(width, height, "远程URL#创建的要显示的元素id", "title");
$("#baiduSearchTrigger").shadeBlock(800, 500, "http://www.baidu.com#baiduSearch", "baidu 搜索");

// 本网域页面元素，格式：$("#触发元素的id").shadeBlock(width, height, "相对路径#创建的要显示的元素id", "title");
$("#localPageTrigger").shadeBlock(600, 300, "local.html#localPage", "本网域页面");

页面也很简单：

<body>
	<div>
		<a href="#loginForm" class="hiddenDisplayTrigger" id="loginFormTrigger">显示登录窗口</a>
		<a href="http://www.baidu.com#baiduSearch" class="hiddenDisplayTrigger" id="baiduSearchTrigger">显示baidu搜索页面</a>
		<a href="index.html#localIndex" class="hiddenDisplayTrigger" id="localIndexTrigger">显示本网域页面</a>
	</div>
	<div class="shadeHiddenBlock" id="loginForm">
		<p>
			<label for="username">用户名</label><input type="text" name="username" id="username" />
		</p>
		<p>
			<label for="password">密&nbsp;&nbsp;&nbsp;码</label><input type="password" name="password" id="password" />
		</p>
	</div>
</body>

效果大致如下：