jQuery 实现的遮罩层效果

最新推荐文章于 2021-03-31 18:31:41 发布

--------11111111111-

最新推荐文章于 2021-03-31 18:31:41 发布

阅读量103

点赞数

分类专栏： jQuery 文章标签： HTML JavaScript JSP CSS jQuery ViewUI

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

--------11111111111-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 实现的遮罩层效果

思路：当触发一个事件，弹出一个iframe，让这个iframe遮住后面的页面，这样后方的页面功能就会全部失效，也就可以达到一个遮罩的效果，再通过一个事件取消ifram，恢复后方页面的功能。代码：主页面代码: &lt;%@ page language="java" pageEncoding="UTF-8"%&gt;&lt;% String path = r...
复制链接

扫一扫