jQuery 实现的遮罩层效果

broken · 发表于 2011-8-24 11:17

思路：当触发一个事件......
div不更好，更方便......
div在ie6中会有......
select的显示级......
kaobian写道 ......
kaobian写道 ......

思路：当触发一个事件，弹出一个iframe，让这个iframe遮住后面的页面，这样后方的页面功能就会全部失效，也就可以达到一个遮罩的效果，再通过一个事件取消ifram，恢复后方页面的功能。

代码：

主页面代码:

<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
         + request.getServerName() + ":" + request.getServerPort()
         + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
      <base href="<%=basePath%>">
      <title>mask</title>
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript">
         $(document).ready(function (){
            $('#mask').bind({
                  click:function (){
                        var c = "<iframe frameborder='0' class='mask'style='width:"+$(window).width()+";height:"+($(window).height())+"' src='maskContent.jsp'  allowtransparency='true'></iframe>";
                        $('body').append(c);
                  }
            });

         });
      </script>
      <style type="text/css">
      .mask{
         display:block;
         position:absolute;
         z-index:100;
         top: 0px;
         left:0px;
         filter:alpha(opacity=50);
      }
      body{
         background-color:yellow;
      }
      </style>
</head>
<body>
      <center>
      <input type="button" value="mask" id="mask">
      </center>
</body>
</html>

-------------
iframe 潜入的页面

<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
         + request.getServerName() + ":" + request.getServerPort()
         + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
      <base href="<%=basePath%>">
      <title>mask</title>
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript">
         $(document).ready(function (){
               $('#remove').bind('click',function (){
                  $(window.parent.document).find('iframe').remove() ;
               });
         });
      </script>
      <style type="text/css">
      body{
         background-color: #6C7B8B;
      }
      </style>
</head>
<body>
      <center>
         <br><br><br><br><br><br><br><br><br>
      <input type="button"  id="remove" value="remove">
      <center>
</body>
</html>

话说我当年 · 发表于 2011-8-24 11:17

div 不更好，更方便？

shmilyyu · 发表于 2011-8-24 11:17

select的显示级别比div高，要把div放在iframe中

醉倚西风 · 发表于 2011-8-24 11:17

kaobian 写道
div 在ie6中会有bug，它不能遮挡select框，你可以尝试一下

bgiframe

fossil · 发表于 2011-8-24 11:17

kaobian 写道
div 在ie6中会有bug，它不能遮挡select框，你可以尝试一下

这是一个创新！

帐号		自动登录	找回密码
密码			成为会员