在练习JQUERY的时候 选择thickbox作为popwindow;但是发现几个问题：
1：层的坐标控制
2：层的mouseout事件
问题1：使用jquery 的 offset处理坐标；并设置需要显示层的css的"z-index"属性大于thickbox层的"z-index"属性,这样即使这个ssss DIV 在thickbox外也能置顶显示；
$('#city2').click(function (e){
var offset = {'top':e.pageY,'left':e.pageX};
$('#ssss').css("position" ,"fixed").css("z-index" ,"200").css("display","block").css(offset);
});
问题2：javascript的mouseout似乎有些问题，取而代之的是可以使用jquery的hover来代替mouseout事件带来的问题；
$("#ssss").hover(function(){
$(this).css("display","block");
},function(){
$(this).css("display","none");
});
完整的样例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="js/jquery-latest.js"></script>
<script src="js/thickbox-compressed.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script>
jQuery(document).ready(function(){
$('#city2').click(function (e){
var offset = {'top':e.pageY,'left':e.pageX};
$('#ssss').css("position" ,"fixed").css("z-index" ,"200").css("display","block").css(offset);
});
$("#ssss").hover(function(){
$(this).css("display","block");
},function(){
$(this).css("display","none");
});
});
</script>
</head>
<body>
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>
<div id="hiddenModalContent" style="display:none">
<p> <a>北京</a> <a id="city2">测试</a> </p>
<p style="text-align:center">
<input type="submit" id="Login" value=" Ok " onclick="tb_remove()" />
</p>
</div>
<div id="ssss" style="border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; display:none;">
<ul>
<li>北京
<input type="checkbox"/>
</li>
<li>上海
<input type="checkbox"/>
</li>
<li>深圳
<input type="checkbox"/>
</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
本文将详细讲解如何利用jQuery插件Thickbox创建一个遮罩层，为用户提供更好的浏览体验。 Thickbox是一款轻量级的jQuery插件，它能够创建全屏弹出窗口，用于展示图片、视频或者任何网页内容。这个插件常用于创建类似...
它通过JavaScript动态创建一个浮动的DOM元素，这个元素作为弹出层覆盖在页面上，展示用户想要显示的内容。弹出层可以包含图像、HTML内容、外部网址或者甚至整个页面（通过iframe）。它具有透明度控制、尺寸调整以及...
在网页设计中，弹出层是一个非常实用的元素，它可以用于显示更多的信息，而不必让用户离开当前页面。Thickbox通过将内容封装在一个可调整大小的窗口中，并以淡入淡出效果呈现，使用户可以方便地浏览图片、阅读文本或...
ThickBox是一款经典的JavaScript弹出层插件，它在网页设计和开发中广泛使用，尤其在展示图片、加载Ajax内容以及内嵌各种类型的内容时，提供了便捷的用户体验。这款插件以其灵活性、可定制性和易用性而备受青睐。下面...
4. **初始化插件**：如果需要在页面加载后动态生成弹出层，可以使用jQuery的`.thickbox()`方法来初始化。 在实际应用中，Thickbox3.1的压缩包可能包含以下文件： 1. `thickbox.css`：包含Thickbox的默认样式。 2. ...
Thickbox利用jQuery的强大功能，通过简单的JavaScript代码就能创建出美观的弹出层效果。在网页中，你可以将任何链接指向一个图片、HTML文档或远程页面，并通过Thickbox将其在弹出窗口中打开，从而提供更好的用户体验...
Thickbox通过JavaScript和CSS来创建一个全屏的遮罩层，并在其中加载内容。要调用Thickbox，可以使用HTML的`<a>`标签，附加`class="thickbox"`和一些特定的属性，例如`tb_width`和`tb_height`来定义弹出窗口的大小。...
Thickbox是利用jQuery的这些特性，构建出的一个弹出层插件。它的主要功能包括： 1. **图片预览**：用户点击一个链接，Thickbox可以将图片以全屏的弹出窗口形式显示，提供良好的视觉体验。 2. **HTML内容展示**：...
**jQuery ThickBox** 是一个基于 **jQuery** 库的弹出层插件，它允许开发者在网页中创建优雅的、全屏的、响应式的轻量级弹窗效果。ThickBox 强调用户体验，提供了图片、iframe、多媒体内容（如视频和音频）以及纯...
Thickbox的核心在于它将弹出层与页面内容分离，通过CSS和JavaScript实现动态加载和显示。它利用jQuery库的强大功能，如DOM操作、事件处理和动画效果，使得弹出层的创建和管理变得简单。 ### 2. 安装与引入 首先，...
当用户点击一个链接或图片时，Thickbox插件会捕获这个事件，然后在页面上生成一个弹出层，显示选定的内容。它支持多种类型的内容： 1. 图像：Thickbox可以轻松地处理单张图片或者图片画廊。当用户点击一个链接到...
2. **标记链接**：对于需要通过ThickBox显示的内容，你需要在相关的链接或图像标签中添加特定的类名（通常是`thickbox`），这样ThickBox才能识别并处理这些元素。 3. **配置参数**：ThickBox支持一些可选参数，如...
`ThickBox`利用jQuery库提供的DOM操作和事件处理能力，通过CSS样式和JavaScript动态创建一个全屏遮罩层，然后在这个遮罩层上显示内容。当用户点击触发元素（如图片或按钮）时，`ThickBox`会将指定的内容（如图片、...
当用户点击一个链接或图像，Thickbox会通过JavaScript动态地创建一个覆盖整个页面的黑色半透明背景层，然后在中央加载选定的内容。内容可以是图片、HTML页面、SWF文件、YouTube视频等，这些都是通过修改DOM元素并在...
JQuery Thickbox是一款功能强大的弹出层插件，它允许用户在现有的网页上创建美观的、响应式的轻量级模态窗口，用于展示图片、网页内容、IFrame以及多图分页浏览。Thickbox利用jQuery库的强大功能，提供了一种简洁的...
ThickBox是一个基于jQuery的弹出层插件，它允许开发者在网页中轻松集成弹出对话框功能，提高用户体验。要使用ThickBox插件，您需要准备三个文件：thickbox.js、thickbox.css、jquery.js，这些文件都可以在网上找到并...
Thickbox的基本工作原理是通过CSS和JavaScript将网页中的内容在一个透明的背景层上显示，这样用户可以聚焦在弹出的内容上，而不会被页面其他元素分散注意力。它通常用于显示大图预览、模态对话框或任何需要突出显示...
Thickbox的运作原理是通过CSS和JavaScript来创建一个全屏的遮罩层，并在其中加载所需展示的内容。用户触发特定的链接或按钮时，Thickbox会将关联的内容以弹出框的形式呈现。这个过程包括了动态计算屏幕尺寸、设置...
`，以确保Flash位于较低的层，从而让ThickBox弹出框能正确显示在前面。 总的来说，ThickBox是一个功能强大且易于集成的弹出框解决方案，通过合理的配置和使用，可以极大地提升网站的用户体验。遇到问题时，查阅官方...