练习了一下遮罩效果的实现——基于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">密 码</label><input type="password" name="password" id="password" /> </p> </div> </body>
效果大致如下：
相关资源：Jquery遮罩ShowLoading组件