论坛首页 → Web前端技术论坛 →

jQuery 实现的遮罩层效果

浏览 7653 次
锁定老帖子 主题：jQuery 实现的遮罩层效果
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • kaobian
  • 等级: 一星会员
  • 性别:
  • 文章: 24
  • 积分: 120
  • 来自: 哈尔滨
   发表时间：2011-05-20  

思路： 当触发一个事件，弹出一个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>
返回顶楼
         
  • fywxin
  • 等级: 初级会员
  • 性别:
  • 文章: 12
  • 积分: 30
  • 来自: 福州
   发表时间：2011-05-26  
div  不更好，更方便？
返回顶楼
          回帖地址
0 请登录后投票
  • kaobian
  • 等级: 一星会员
  • 性别:
  • 文章: 24
  • 积分: 120
  • 来自: 哈尔滨
   发表时间：2011-05-26  
div 在ie6中会有bug，它不能遮挡select框，你可以尝试一下
返回顶楼
          回帖地址
0 请登录后投票
  • maodun1978
  • 等级: 初级会员
  • 性别:
  • 文章: 20
  • 积分: 30
  • 来自: 南昌
   发表时间：2011-05-26  
select的显示级别比div高，要把div放在iframe中
返回顶楼
          回帖地址
0 请登录后投票
  • yanzhexian
  • 等级: 初级会员
  • 性别:
  • 文章: 27
  • 积分: 30
  • 来自: 苏州
   发表时间：2011-05-26  
kaobian 写道
div 在ie6中会有bug，它不能遮挡select框，你可以尝试一下

bgiframe
返回顶楼
          回帖地址
0 请登录后投票
  • lqixv
  • 等级: 一星会员
  • 性别:
  • 文章: 146
  • 积分: 172
  • 来自: 深圳
   发表时间：2011-05-26  
kaobian 写道
div 在ie6中会有bug，它不能遮挡select框，你可以尝试一下


这是一个创新！
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics