jquery气泡,jquery气泡窗口

求JS的气泡提示框代码！就是微博评论收到回复时提示的那种！

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

创新互联是一家集网站设计、成都网站建设、网站页面设计、网站优化SEO优化为一体的专业网站设计公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

html

head

titlejQuery事件处理—显示文字气球/title

script type="text/javascript" src="rs/js/jquery.js"/script

script type="text/javascript"

!--

$(

function()

{

$('.buttons').hover(

function(event)

{

$(this).addClass('hover');

var txt = $(this).text();

$('span class="show" THIS IS ' +

txt + ' MENU /span').appendTo($(this));

},

function()

{

$(this).removeClass('hover');

$('.show').remove();

}

);

}

);

//--

/script

style type="text/css"

.buttons{

width:150px;

float: left;

text-align: center;

color:#000;

margin: 5px;

border: 2px solid;

font-weight: bold;

cursor: hand;

}

.hover{

color:red;

background-image: url("rs/images/boll.gif");

background-repeat:repeat-y;

background-position: bottom;

}

.show{

display: block;

margin: 15px;

}

/style

/head

body

span id="ib" class="buttons"BOLD/span

span id="ii" class="buttons"ITALIC/span

/html

你试试

关于jquery的冒泡提示问题

$("#Map #a2).气泡.hide();

$("#Map #a).气泡.show();

基本的思路是这样的。你可以设置一个全局的变量存储现在冒泡的ID，这样会更方便一些。

事件冒泡是什么如何用jquery阻止事件冒泡

（1）什么是事件起泡

首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。

当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。

当事件在传播过程中，找到了一个能够处理它的函数，这时候我们就说这个函数捕捉到了这个事件。

说到这里，关键的问题来了，那就是一个函数是如何捕捉一个事件的呢？这就涉及到事件的冒泡了。

为了更好地理解冒泡的概念，我建议你现在想象一下你的面前放着一杯水，但这杯水和我们平时看到的有点点不同，它分为数层，每一层又分成一或多个区域，最顶层是我们熟悉的窗口对象（即window对象），下一层分为好几个区域（document对象、history对象等等），而document对象的下一层又分为多个子对象。

这些对象的层次关系构成了DOM中的对象树。

事件的传播是有方向的，当点击一个按钮时所产生的事件从这个按钮处开始向上传播（就像一个水泡从杯底冒上来，这就是之所以叫事件冒泡的原因），但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义（即该属性指向一个存在的函数或一段可执行的语句），如果有，执行这个函数或语句；然后事件继续向上传播，到达按钮的上一层对象（例如一个form对象或document对象，总之是包含了按钮的父对象），如果该对象也定义了onclick属性，则执行属性的值。

所以，如果这个按钮上面有3层（form、document、window），且这三层都定义了onclick属性，则当按钮的click事件产生时，将会调用4个（包括按钮本身的一个）函数或执行4段语句。

事件的这几个特性在0级dom中也是适用的。

（2）jquery阻止事件起泡实例

1、通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

复制代码 代码如下:

$("form").bind(

"submit",

function() {

return false;

}

);

2、通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

复制代码 代码如下:

$("form").bind(

"submit",

function(event){

event.preventDefault();

}

);

3、通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

复制代码 代码如下:

$("form").bind(

"submit",

function(event){

event.stopPropagation();

}

);

（3）关于js事件起泡的验证

今天这个问题主要涉及到几个关键词：对象，触发事件，捕获事件，执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水，但是这杯水是分层次的，最底下是当前触发事件的对象。然后越往上范围越大，最顶层肯定是window，倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。方法就是调用事件对象的阻止起泡的方法。event.stopPropagation();下面是写的一个验证js事件起泡的过程方法。

复制代码 代码如下:

script type="text/javascript"

$(document).ready(function(){

$('.one').click(function(e){

alert('one');

});

$('.two').click(function(e){ 　

alert('two');

});

$('.three').click(function(e){

alert('three');

//阻止起泡取消下面的注释

// e.stopPropagation();

});

});

/script

div class="one" style="width:200px;height:200px;background:green;"

one

div class="two" style="width:150px;height:150px;background:yellow;"

two

div class="three"

three

/div

/div

/div

（4）总结

1.一个事件起泡对应触发的是上层的同一事件

特殊：如果two设置成双击事件，那么在你单击two的时候就会起泡触发one单击的事件

（双击包含单击）。

2.如果在click事件中，在你要处理的事件之前加上e.preventDefault();

那么就取消了行为（通俗理解：相当于做了个return操作），不执行之后的语句了。

3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。

下列能弹出文章2的jquery代码是

JQuery.BlockUI是众多JQuery插件弹出层中的一个，它小巧（原版16k，压缩后10左右）,容易使用, 功能齐全，支持Iframe，支持Modal，可定制性高也意味他默认谦虚的外表。

jQuery的BlockUI插件可以让你在使用AJAX时模拟同步行为，锁定浏览器(模式窗口)。当被激活时，它会防止用户活动的页面（或页面的一部分），直到它被禁用。 BlockUI添加元素的DOM，给它的外观和阻止用户交互行为。

1、首先引入插件

scriptsrc="jquery.min.js"type="text/javascript"/script

scriptsrc="JQuery.BlockUI.min.2.39.js"type="text/javascript"/script

2、调用

!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""

htmlxmlns=""

headtitle/title

scriptsrc="jquery.min.js"type="text/javascript"/script

scriptsrc="JQuery.BlockUI.min.2.39.js"type="text/javascript"/script

scripttype="text/javascript"

$(function(){

$('#Button1').click(function(){

//阻止页面的用户的活动

$.blockUI();

});

$('#Button2').click(function(){

//自定义信息内容

$.blockUI({message:'h3imgsrc="busy.gif"/Justamoment.../h3'});

});

$('#Button3').click(function(){

//自定义样式

$.blockUI({css:{backgroundColor:'#f00',color:'#fff'}});

});

$('#Button4').click(function(){

//定义弹出的信息为页面的某一个元素

$.blockUI({message:$('#domMessage')});

});

$('#btnClose').click(function(){

//关闭弹出层

$.unblockUI();

});

$('#Button5').click(function(){

//设置淡入，淡出，自动关闭时间

$.blockUI({fadeIn:700,fadeOut:700,timeout:2000});

});

//简单的气泡提示

$.growlUI('提示','删除成功!');

});

/script

/head

body

ol

li阻止页面的用户的活动,不会自动消失，请刷新：$.blockUI();

inputid="Button1"type="button"value="测试"/

/li

li自定义消息：

inputid="Button2"type="button"value="测试"/

/li

li自定义样式：

inputid="Button3"type="button"value="测试"/

/li

li弹出指定的元素，并关闭弹出层(该层可以为隐藏)：

inputid="Button4"type="button"value="测试"/

/li

li设置淡入，淡出，自动关闭时间：

inputid="Button5"type="button"value="测试"/

/li

/ol

divid="domMessage"style="text-align:center;width:200px;height:50px;border;

1pxsolid#9cf;padding:25px;display:none;"

h3

Message/h3

inputid="btnClose"type="button"value="关闭"/

/div

/body

/html

3、样式修改

jQuery blockUI 提供的默认样式过于朴素, 可以在每一次调用blockUI() 函数时进行修改. 也一次直接修改库文件 jquery.blockUI.js, 修改$.blockUI.defaults 对象相关的代码：

显示源码

//重写defaults对象中的属性

$.blockUI.defaults={

//弹出的信息

message:'h1Pleasewait.../h1',

//定义消息框样式

//$.blockUI.defaults.css={};

//默认定义消息框样式Css样式

css:{

padding:0,

margin:0,

width:'30%',

top:'40%',

left:'35%',

textAlign:'center',

color:'#000',

border:'3pxsolid#aaa',

backgroundColor:'#fff',

cursor:'wait'

},

//遮罩样式

overlayCSS:{

backgroundColor:'#000',//颜色

opacity:0.6//透明度

},

//使用$.growlUI完成自动气泡时的样式

growlCSS:{

width:'350px',

top:'10px',

left:'',

right:'10px',

border:'none',

padding:'5px',

opacity:0.6,

cursor:null,

color:'#fff',

backgroundColor:'#000',

'-webkit-border-radius':'10px',//貌似是圆角

'-moz-border-radius':'10px'

},

//是否在非IE浏览器中使IFrame获得焦点，未验证的

forceIframe:false,

//遮罩层的Z-Index值，越大越在上面

baseZ:1000,

//是否居中

centerX:true,

centerY:true,

//是否允许拉大

//短的网页上。禁用如果你想防止车身高度的变化

allowBodyStretch:true,

//遮罩时是否禁用键盘和鼠标事件

bindEvents:true,

//bedefaultblockUIwillsupresstabnavigationfromleavingblockingcontent

//(ifbindEventsistrue)

//遮罩内容的Tab导航是否可用

constrainTabKey:true,

//淡入时间

fadeIn:200,

//淡出时间

fadeOut:400,

//timeinmillistowaitbeforeauto-unblocking;setto0todisableauto-unblock

//自动淡出时间

timeout:0,

//disableifyoudon'twanttoshowtheoverlay

//是否自动遮罩

showOverlay:true,

//iftrue,focuswillbeplacedinthefirstavailableinputfieldwhen

//pageblocking

//自动获得焦点

focusInput:true,

//抑制FF/Linux的叠加样式的使用（由于具有不透明的性能问题）

applyPlatformOpacityRules:true,

//调用解封已完成时回调方法;

//onUnblock(element,options)

onUnblock:null