jQuery 兑现的遮罩层效果

jQuery 实现的遮罩层效果

思路：当触发一个事件，弹出一个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>

1 楼 fywxin 2011-05-26

div 不更好，更方便？

2 楼 kaobian 2011-05-26

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

3 楼 maodun1978 2011-05-26

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

4 楼 yanzhexian 2011-05-26

kaobian 写道

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

bgiframe

5 楼 lqixv 2011-05-26

kaobian 写道

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

这是一个创新！

jQuery 兑现的遮罩层效果

相关推荐