因为项目的需要，所以利用jquery实现了简单的点击表格某一行，行后直接弹出一个div对话框的效果，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>New Web Project</title>
<script type="text/javascript" src="jquery-1.2.6.min.js">
</script>
<script type="text/javascript">
// 鼠标移动到表格某一行，这一行的背景色变红，鼠标移开，还原背景色
$(document).ready(function(){
$("tr").bind('mouseover', function(){
$(this).css("background-color", "red").css("cursor", "hand");
});
$("tr").bind('mouseout', function(){
$(this).css("background-color", "");
});
// 给表格的每一行都绑定一个单击事件，用来触发弹出div对话框的函数
$("tr").bind('click', function(){
$("#divResource").show();
getAbsPoint($(this).get(0));
});
});
// 取得空间的坐标位置
function getAbsPoint(e){
var x = e.offsetLeft, y = e.offsetTop;
while (e = e.offsetParent) {
x += e.offsetLeft;
y += e.offsetTop;
}
// 给弹出的div设置样式 和空间坐标
$("#divResource").css({
top: y,
left: x + 400,
width:'300px',
height:'200px'
});
}
// 关闭弹出框
function closeDiv(){
$("#divResource").hide();
}
</script>
</head>
<body>
表格
<br/><hr size="3"/>
<table border="1" width="400px" height="300px" bgcolor="gray">
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
<tr>
<td>
列一
</td>
<td>
列二
</td>
<td>
列三
</td>
<td>
列四
</td>
</tr>
</table>
<div id="divResource" style="display:none;position:absolute;background-color:#0000FF;">
<p>
<span style="padding-left:200px">
<a href="javascript:void(0)" style="text-decoration:none;" title="关闭古诗欣赏" onclick="closeDiv();">关闭古诗欣赏</a>
</span>
<hr size="2"/>
<center>
床前明月光，<br/><br/>
疑似地上霜；<br/><br/>
举头望明月，<br/><br/>
低头思故乡。
</center>
</p>
</div>
</body>
</html>
效果图以及整个demo见附件.
- 大小: 68 KB
分享到：
相关推荐
"jQuery div 弹出框"是指使用jQuery技术来创建一个可自定义的、浮动于页面上的对话框或提示框，通常称为模态窗口。这种弹出框通常用于显示警告、确认信息、详细内容或表单等。以下将详细讲解如何实现jQuery div弹出...
例如，通过`.fadeIn()`和`.fadeOut()`方法实现弹出框的渐显渐隐，或者使用`.slideToggle()`实现上下滑动效果。 3. **插件化的遮罩弹出框** 为了提高开发效率和代码复用性，许多开发者会编写jQuery插件来封装这些...
从提供的文件内容中，我们可以提取以下关于jQuery获取表格中某一行某一列值的知识点： 1. jQuery选择器的使用：在文中，通过使用选择器 $(".div") 找到了包含多个表格的div元素。这说明了jQuery选择器用于选取页面...
本文将详细解析如何利用HTML、CSS和jQuery来创建一个自定义的弹出框，即"自定义jquery弹出框demo1"。 首先，我们需要理解HTML结构。在创建弹出框时，我们通常会有一个隐藏的div元素，这个div包含了弹出框的所有内容...
综上所述，"jQuery超炫淡入淡出效果DIV渐变居中弹出框插件"结合了jQuery的动画效果、CSS3的渐变和定位技术以及自定义的弹出框逻辑，为用户提供了一种吸引人的交互体验。通过下载提供的压缩包文件，你可以获取到完整...
总之，jQuery弹出框是网页交互中的重要组成部分，通过理解基本的JavaScript对话框、自定义模态窗口的创建以及利用jQuery插件，我们可以创建出丰富多样的弹出框效果，提高用户体验。实践中的关键是根据项目需求灵活...
而弹出框（popup）则是在用户操作后，如点击按钮或链接，突然在页面上显示的一个独立窗口，通常包含一些重要的提示、警告信息，或者需要用户确认的操作。 创建div弹出框主要涉及以下几个关键知识点： 1. **CSS定位...
3. 动画效果：使用jQuery的动画方法，如`fadeIn()`, `fadeOut()`, `animate()`等，实现弹出框平滑地显示和消失。 4. CSS样式控制：设置弹出框的大小、位置、透明度等属性，确保其视觉效果符合设计需求。同时，为整个...
在网页设计中，"Div 弹出信息框例子"是一个常见的需求，用于向用户展示重要的提示、警告或者交互信息。Div元素是HTML中的一个布局工具，全称为“Division”，意为区域划分，常用于创建复杂页面结构。在这个场景下，...
在jQuery中实现弹出框样式，我们需要借助CSS（层叠样式表）来控制外观，而用jQuery处理动态行为。以下是一些关键步骤和知识点： 1. **创建HTML结构**：首先，我们需要在HTML文档中定义弹出框的结构。这通常包括一个...
根据提供的文件信息，我们可以总结出以下关于使用jQuery实现弹出框的相关知识点： ### 一、弹出框的基本概念 在Web开发中，弹出框是一种常见的用户交互方式，用于显示额外的信息或者请求用户输入某些数据。弹出框...
本篇文章将深入探讨如何使用jQuery实现弹出框的真实案例，并分享一些关键知识点。 首先，我们来理解弹出框的基本概念。弹出框是一种阻断用户与页面其余部分交互的窗口，直到用户对弹出框进行操作或关闭它。常见的弹...
本资源"jQuery点击显示弹出框关闭按钮代码.zip"包含了一个利用jQuery实现的弹出框功能，该功能在用户点击某个元素时显示一个弹出框，并且弹出框内带有关闭按钮。下面我们将详细探讨相关的jQuery知识和实现步骤。 ...
"jquery右下角弹出框"是利用jQuery实现的一种常见的用户体验设计元素，通常用于显示通知、消息或者提示信息，不打断用户对页面主要内容的浏览。这种弹出框位于网页的右下角，既不会完全遮挡视线，又能引起用户的注意...
例如，利用CSS3的`transition`属性实现弹出框的淡入淡出效果： ```css .popup { opacity: 0; transform: translateY(-100px); transition: all 0.5s ease-in-out; } .popup.show { opacity: 1; transform: ...
- 如果项目使用了Bootstrap框架，可以利用其内置的Modal组件创建弹出框。Bootstrap Modal提供了丰富的配置选项和预设样式。 - 示例HTML结构： ```html Launch demo modal <div class="modal fade" id=...
弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出...
结合JavaScript（尤其是jQuery库）可以实现丰富的交互效果，比如滑动弹出div的效果。这种效果常见于下拉菜单、模态框或者侧边栏等，能够提供良好的用户体验，使网站更具动态感和吸引力。 首先，我们要理解CSS在实现...
通常，开发人员会借助于jQuery UI库来实现弹出框效果，如`dialog`组件。在提供的文件`jqueryUI.js`中，就包含了jQuery UI库的部分功能，其中包括弹出框的实现。 **jQuery UI Dialog** jQuery UI的`dialog`方法可以...