思路： 当触发一个事件，弹出一个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>
分享到：
相关推荐
本篇将详细介绍如何利用jQuery实现遮罩层效果，并探讨相关技术细节。 首先，我们需要引入jQuery库。在HTML文档的`<head>`部分添加以下代码来获取jQuery库： ```html <script src="https://code.jquery....
通过以上步骤，你就成功地使用Jquery实现了遮罩层效果。这个基础的示例可以进一步扩展，例如，你可以自定义遮罩层的大小、位置，或者在遮罩层中添加更复杂的HTML结构，以适应各种用户界面需求。同时，`jquery....
在busy-load插件中，jQuery提供了一个简洁的API，使得开发者能够快速地在网页中添加遮罩层和loading效果。通过引入jQuery库，我们可以利用其强大的选择器功能选取需要添加遮罩层的元素，并应用插件的各种配置。 **...
现在，我们需要编写 jQuery 代码来实现遮罩层的显示、隐藏和自动关闭功能。在 `<script>` 标签中，添加以下代码： ```javascript $(document).ready(function() { // 全屏遮罩 function toggleFullScreenMask() {...
总的来说，Jquery-reveal 作为一个轻量级的遮罩层组件，通过简洁的 API 和丰富的自定义选项，为开发者提供了高效、灵活的解决方案，使得在网页中实现遮罩层效果变得轻而易举。在实际应用中，可以根据项目需求进行...
这个"jQuery鼠标经过图片遮罩层效果"就是一个典型的例子，它利用jQuery库实现了当鼠标悬停在图片上时，会显示一个覆盖在图片上的遮罩层，并且具有鼠标跟随的效果。下面将详细讲解这个效果的实现原理和相关知识点。 ...
总的来说，"jQuery提示遮罩层"插件提供了一个快速、灵活的方式来实现网页中的提示和遮罩效果，对于提升网页交互体验有着显著的帮助。它的易用性和高度可定制性使其成为许多开发者在构建网站或应用时的首选工具。
通过使用jQuery，我们可以轻松地动态添加、修改和删除DOM元素，实现遮罩层的动态效果。 1. **创建遮罩层**：在HTML中，我们首先需要创建一个用于遮罩层的div元素，设置其CSS样式以全屏显示并具有适当的透明度。例如...
"jQuery弹出登录遮罩层效果"是一个常见的交互设计技术，它允许用户在不影响主页面内容的情况下，通过一个半透明的遮罩层弹出登录窗口。这种方法既保证了用户体验，又确保了登录过程的安全性。下面将详细介绍如何实现...
本文将深入探讨“jquery-Hover遮罩层”这一主题，它涉及到jQuery中的悬停事件处理（hover）以及如何实现动态的遮罩层效果。 首先，让我们了解jQuery的`hover`函数。`hover`是一个组合方法，它可以同时处理元素的`...
总结，jQuery遮罩层是网页开发中的一个重要工具，通过结合CSS和jQuery，我们可以轻松创建出各种各样的遮罩层效果，提升网站的交互性和用户体验。在实际项目中，可以根据需求进行定制和扩展，以满足特定的设计和功能...
BlockUI是一款非常实用的jQuery插件，它能够方便地实现页面区域的锁定，即在特定操作期间显示一个遮罩层，提升用户体验。 BlockUI的主要功能包括： 1. **创建遮罩层**：当需要用户等待某些长时间运行的操作完成时...
本示例中的“jquery 遮罩层”是指利用jQuery来实现一种交互效果：当鼠标悬停在图片上时，图片的右下角会出现一个白色的三角形遮罩层，同时显示图片的标题内容。这个效果通常用于提高用户体验，让用户能够快速了解...
在实现图片文字遮罩效果时，jQuery可以帮助我们动态地调整元素的位置和透明度，从而达到理想的效果。 在给定的文件中，`jquery.capSlide.js`很可能是这个插件的核心代码。它可能包含了一系列函数和方法，用于创建和...
然后，通过JavaScript库JQuery，我们可以轻松地实现遮罩层的动态显示和隐藏。JQuery提供了一种简洁的API来操作DOM元素，使得添加事件监听器、修改样式属性和控制动画变得更加简单。例如，当用户点击某个按钮时，可以...
"jQuery有遮罩层的广告幻灯片插件"就是这样一个工具，它结合了jQuery的强大功能和幻灯片展示效果，同时添加了遮罩层功能，为用户提供更加沉浸式的浏览体验。 首先，我们来详细了解jQuery。jQuery是由John Resig在...
同时，为了实现遮罩层效果，我们需要创建一个全屏的半透明背景层，通常使用绝对定位并设置适当的z-index使其位于登录框之上。 其次，我们需要考虑登录框的交互逻辑。这通常涉及到事件监听，如点击登录按钮时，触发...
总的来说，“jQuery遮罩层在线QQ客服代码”是一个综合运用jQuery、CSS和HTML技术的实例，展示了如何通过JavaScript库实现动态交互和视觉效果。掌握这一技术，不仅可以提升网站的专业形象，还能有效提高用户满意度，...
要使用`jQuery UI`的`dialog`来实现遮罩层效果，首先需要在项目中引入`jQuery`和`jQuery UI`的CSS和JS文件。你可以在官方网站上下载最新版本的库，或者通过CDN链接直接引用： ```html <!-- 引入jQuery --> ...