前端遮罩层实现_jQuery 实现的遮罩层效果

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

代码：

主页面代码:

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

mask

$(document).ready(function (){

$('#mask').bind({

click:function (){

var c = "";

$('body').append(c);

}

});

.mask{

display:block;

position:absolute;

z-index:100;

top: 0px;

left:0px;

filter:alpha(opacity=50);

}

body{

background-color:yellow;

}

-------------

iframe 潜入的页面

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

mask

$(document).ready(function (){

$('#remove').bind('click',function (){

$(window.parent.document).find('iframe').remove() ;

});

body{

background-color: #6C7B8B;

}

分享到：

2011-05-20 12:55

论坛回复 / 浏览 (5 / 7455)

5 楼

lqixv

2011-05-26

kaobian 写道

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

这是一个创新！

4 楼

yanzhexian

2011-05-26

kaobian 写道

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

bgiframe

3 楼

maodun1978

2011-05-26

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

2 楼

kaobian

2011-05-26

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

1 楼

fywxin

2011-05-26

div 不更好，更方便？

前端遮罩层实现_jQuery 实现的遮罩层效果相关推荐

android 黑色遮罩按钮,打造一个Android的遮罩层SeekBar
简介:所谓遮罩动画,就是利用遮罩的动画原理来实现的.可以看到的动画是遮罩层区域的内容. 说说这个实现原理:原理其实很简单,只要了解android画笔怎么工作的就非常容易理解.一:指定绘制图片或者层的大 ...
前端基础学习笔记背景渐变倒影遮罩
背景首先分享一个css利用渐变实现的图案源代码网站:https://leaverou.github.io/css3patterns/ background-size: X Y;改变背景图片的大小具 ...
前端框架Layui学习五：弹出层和数据表格
Layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,拿来即用. 一.弹出层在 layui 中使用 layer l ...
html遮罩底下的不动,AE做遮罩，如何让遮罩不动，底下的素材动？
回答: 这要分为俩个情况,一是素材不动,遮罩动:二是素材动,遮罩不动. 第一种情况: 1. 点击1处的码表(字前面的小圆圈) 2. 将1的时间轴移到任意位置,然后双击2的遮罩点 3. 拖动圆圈至任意位 ...
极致的遮罩处理(一)：DeepFaceLab手动遮罩编辑。
这篇文章专业程度较高,请务必仔细阅读!本文将回答这样几个问题:1.哪些模型有遮罩学习功能?遮罩学习有什么用?2.怎么编辑遮罩.3.对于有部分遮挡的SRC图片应该怎么办?4.如果DST脸上有个" ...
Javascript前端加载等待圆型圈提示实现效果
Javascript前端加载等待圆型圈提示实现效果 CSS内容 #loading {background-color: #9f9f9f;opacity: 0.15;height: 100%;width ...
java domain层_java框架中的controller层、dao层、domain层、service层、view层
1.Controller层:接口层,用户访问请求时对接. Controller层负责具体的业务模块流程的控制,在此层里面要调用Serice层的接口来控制业务流程,控制的配置也同样是在Spring的配置 ...
计算机网络汇聚层,【大白电气】接入层、汇聚层、核心层——中大型计算机网络系统结构介绍及交换机选型建议...
接入层交换机接入层的主要目的是允许终端用户连接到网络,因此接入层交换机往往具有低成本和高端口密度特性,通常建议使用性价比高的设备.管理型交换机和非管理型交换机都可以用在接入层,视具体预算和网络需求而 ...
接入层的流程和非接入层
所谓接入层的流程和非接入层的流程,实际是从协议栈的角度出发的.在协议栈中,RRC和RANAP层及其以下的协议层称为接入层,它们之上的MM.SM.CC.SMS 等称为非接入层.简单地说,接入层的流程,也 ...

前端遮罩层实现_jQuery 实现的遮罩层效果

前端遮罩层实现_jQuery 实现的遮罩层效果相关推荐

最新文章

热门文章