首先是jsp页面,主要是一个按钮+2个DIV层，其中一个层是用来全窗口遮罩，另一个层是浮动出来显示数据,如下：
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>产品管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
[color=red]
<script src="..../jquery.js"/>
<script src="..../jquery.fn.customize.js/><!--自己写的jquery方法，等下呈上-->
[/color]
<style type="text/css">
.finttest{
font-size:10px;
}
</style>
<script type="text/javascript">
functionUrl = "<%=functionUrl %>";
functionUrlParam = "<%=functionUrlParam %>";
$(document).ready(function(){
$("#floatdiv").floatdiv("fullwindow","datawindow",0.9,0.4,function(){
$.ajax({
type: "post",//使用get方法访问后台
dataType: "javascript",//返回文本格式的数据
url: "<%=context%>/product/addproduct.jsp",//要访问的后台地址
data: "",//要发送的数据
complete :function(){},//AJAX请求完成时显示提示
error:function(msg){alert('加载错误');},
success: function(msg){//msg为返回的数据，在这里做数据绑定
$("#datawindow").html(msg);
}
});
});
});
</script>
</head>
<body topmargin="0" leftmargin="0">
<div id='fullwindow'></div>
<div id='datawindow'></div>
<button id='floatdiv'>浮动</button>
</body>
</html>
接着是jqeury自定义方法，如下：
/**
* Author: caojianwei
* Date: 2010-07-08 15:07
* UseSample: $("#ceshibutton1").floatdiv("fullceshi","ceshi",0.9,0.75,function(){});
* Page Must have: <div id="fullceshi"></div><div id="ceshi"></div>
**/
//自定义浮动层，关闭层双击弹出层即可
jQuery.fn.floatdiv = function(fullDivID, //占满窗口的透明层
divID, //弹出层的ID
divWidthScale, //弹出层宽比例 0~1
divHeightScale, //弹出层高比例 0~1
callfn){ //弹出层完成后需要执行的函数
var pagewidth = $(window).width();
var pageheight = $(window).height();
//弹出窗口的宽高不能超过父窗口的宽高
var widthScale = pagewidth*divWidthScale;
var heightScale = pageheight*divHeightScale;
$("#"+divID).width(widthScale>pagewidth?pagewidth:widthScale);
$("#"+divID).height(heightScale>pageheight?pageheight:heightScale);
//设置弹出窗口的宽高,及弹出的位置
var divwidth = $("#"+divID).width();
var divheight = $("#"+divID).height();
var divleft = (pagewidth-divwidth)/2;
var divtop = (pageheight-divheight)/2;
//全屏遮罩层设置
function oprationFullDiv(){
//先使用层遮罩住全部窗口
$("#"+fullDivID).css("position","absolute");
$("#"+fullDivID).css("left",0);
$("#"+fullDivID).css("top",0);
$("#"+fullDivID).css("width",pagewidth);
$("#"+fullDivID).css("height",pageheight);
$("#"+fullDivID).css("background-color","#EAEAEA");
$("#"+fullDivID).show();
//遮罩层完毕后显示数据窗口
$("#"+fullDivID).fadeTo("slow",0.6,function(){
windowDiv();
});
}
//窗口遮罩层设置
function windowDiv(){
$("#"+divID).css("position","absolute");
$("#"+divID).css("left",divleft);
$("#"+divID).css("top",divtop);
$("#"+divID).css("width",divwidth);
$("#"+divID).css("height",divheight);
$("#"+divID).css("background-color","#FFFFFF");
$("#"+divID).css("overflow","auto");
$("#"+divID).show();
//数据窗口显示完成,加载数据
$("#"+divID).fadeTo("slow",1,function(){
if(callfn!=null){
var CallParams = {};
CallParams.success = callfn;
$.ajax(CallParams);
}
});
}
//加载
$(document).ready(function(){
//双击浮动窗口 关闭浮动窗口
$("#"+divID).dblclick(function(){
$("#"+divID).fadeOut("slow",function(){
$("#"+divID).hide("fast",function(){
$("#"+fullDivID).hide();
});
});
});
//单击浮动窗口外的地方则将浮动窗口关闭
$("#"+fullDivID).click(function(){
$("#"+divID).fadeOut("slow",function(){
$("#"+divID).hide("fast",function(){
$("#"+fullDivID).hide();
});
});
});
});
//为传入符合id的元素绑定click事件
$(this).bind('click',function(){
oprationFullDiv();
});
alert('1');
};
至于为什么要写2个div，主要是由于在使用javascript脚本动态增加一个div时无法控制这个div不被外层的div包含进去，这样这个内层的div总是被外层的div覆盖着，暂时没想到好的方法.
分享到：
相关推荐
这是一个示例浮动层，你可以在这里放置任何内容。 关闭 $(document).ready(function() { // 初始化浮动层 $('#my-layer').floatLayer({ position: 'center', // 可选值有 'top', 'bottom', 'left', '...
本教程将详细讲解如何利用jQuery实现一个精美的浮动层效果，这种效果通常用于创建弹出窗口、提示框或信息提示。 首先，我们需要理解浮动层的基本概念。浮动层，也称为浮动对话框或浮窗，是一种在网页上显示临时信息...
这个简单的例子展示了如何使用jQuery和CSS实现一个基础的浮动层效果。在实际应用中，你可能需要根据项目需求调整样式、添加动画效果或者限制浮动层的移动范围。同时，注意性能优化，避免在大范围或频繁的`mousemove`...
浮动层通常是一个独立的容器，它可以根据用户操作从页面的一侧（左或右）滑出或隐藏。这种设计增加了用户体验的交互性，使得用户能够快速地注意到并使用该功能。 2. **Jquery基础** Jquery是一个强大的JavaScript...
例如，当浮动层显示时，可以自动将焦点移动到浮动层内的第一个可聚焦元素，这样用户可以通过键盘导航在浮动层内操作。 总的来说，实现“jQuery浮动层点击图标按钮关闭或展开”的功能涉及jQuery的选择器、事件绑定、...
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层</div> 并随页面...
"jQuery浮动层动画loading页面加载特效"就是一种这样的解决方案，它利用JavaScript库jQuery的强大功能，结合CSS动画，为用户展示了一个美观且具有提示性的加载过程。 jQuery是一个轻量级、高性能的JavaScript库，它...
在标题提及的案例中，"jQuery弹出层 可移动层 提示框 浮动层"，意味着我们需要创建一个不仅可以显示信息，还可以通过用户手势移动的浮动窗口。为了实现这一功能，我们需要结合jQuery的选择器、事件处理和动画方法。...
本教程将详细讲解如何利用jQuery技术制作一个在页面顶部浮动的层，该层可以通过点击图标按钮进行显示和隐藏。这个功能在网页设计中常见于顶部导航栏或通知区域，为用户提供方便快捷的交互体验。 首先，我们需要理解...
当鼠标进入目标元素，我们可能需要创建一个新的浮动层并将其插入到页面中，然后在鼠标离开时将其隐藏。 4. **CSS样式**：为了实现浮动效果，我们需要定义浮动层的位置和样式。这通常包括设置浮动层的`position`（如...
标题中的“jquery浮动层，跳转到页面指定链接”指的是使用jQuery库来创建一个浮动的层（通常称为弹出窗口或对话框），该层能够帮助用户实现页面内部或外部的链接跳转。jQuery是一个强大的JavaScript库，它简化了HTML...
jQuery 是一个流行的 JavaScript 库，提供了丰富的功能和简洁的语法，使得创建动态交互的浮动导航菜单变得非常简单。本文将深入探讨如何利用 jQuery 实现一个高效且响应式的浮动导航菜单。 首先，我们需要了解浮动...
jQuery作为一个强大的JavaScript库，简化了DOM操作、事件处理和动画效果，使得开发这样的功能变得更为便捷。 首先，我们需要了解jQuery的基本概念。jQuery是由John Resig在2006年创建的一个JavaScript库，它的目标...
标题中的“jquery浮动固定层导航描点上下滚动的浮动定位层”是指在网页设计中，使用jQuery库实现的一种导航栏效果。这种效果使得导航栏在页面滚动时始终保持在屏幕顶部，提供持续的导航功能，同时可能包含有滚动描点...
首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。jQuery的核心特性是它简洁的API，使得开发者能够方便地选择和操作页面元素，以及创建复杂的动态效果。 对于...
本资源提供的"基于jQuery精美浮动层效果（JS+CSS）"是一个完整的源码示例，可以帮助开发者理解和实现这种效果。以下是关于这个主题的详细知识点： 1. **jQuery基础**：jQuery是一个流行的JavaScript库，它简化了DOM...
例如，可能有一个名为`jquery.floatlayer.js`的文件，它是实现浮动层功能的核心脚本。 - **201012**：这个可能是日期目录，表示该版本发布于2010年12月，可能包含特定日期的更新或者修复。 - **css**：这个目录存放...
"jquery浮动层"是利用jQuery实现的一种网页元素动态显示技术，通常用于创建提示框、广告横幅或者下拉菜单等需要跟随用户滚动页面而始终保持可见的元素。 浮动层的核心原理是通过CSS定位和jQuery的动态计算来实现。...
对于"jquery弹出左侧隐藏的浮动层"这个主题，我们将探讨如何使用jQuery来实现这样的功能，即在用户触发特定事件时，从页面左侧弹出一个之前隐藏的浮动层。 首先，我们需要在HTML中创建浮动层的基本结构。这个浮动层...