bootstrap popover.js 弹出框组件

bootstrap上提供的popover.js  即弹出框的组件，用法参考官网吧，这里不做介绍，

想说明的是有这样一个需求： 鼠标移等到图片上面时，弹出一些介绍，以及点击图片时发送一个超链接请求，

这跟视频网站上浏览某个视频是一样的道理，下面是代码：

<img class="show-info-img " alt="培训主题"
         src="${ filePath }${ topic.photo }" data-toggle="popover" 
	 data-placement="top" title="${ topic.name }"
         data-content="<strong>简介：</strong>${ topic.description }" />

  会有这样一个情况就是我想要拿到这个topic下的id作为超链接的参数访问，最简单的方法就是在这个<img>标签下方加入

<input type="hidden" value="${ topic.id}">

 然后通过jQuery的遍历操作得到这个id

$("img.show-info-img").click(function(){
		var topicId=$(this).next().val(); 
		if(!topicId){
			elert("无效培训话题");
		}else{
			window.open("topic.do?topicId="+topicId);
		}
		
	}); 

 这时候是没能得到这个id，原因可能是popover.js 通过jQuery生成了一个

<div class="popover">
<div>

  这样的层放在调用这个组件的下方，这就是放在<img>标签的下方，即：

<img class="show-info-img " alt="培训主题"
         src="${ filePath }${ topic.photo }" data-toggle="popover" 
	 data-placement="top" title="${ topic.name }"
         data-content="<strong>简介：</strong>${ topic.description }" />
<div class="popover"></div>
<input type="hidden" value="${topic.id}">

那么上面的js代码是不能得到这个id，要改成

var topicId=$(this).next().next().val(); 

更好的方式是讲这暂存数据放在<img>标签的上面，也就是

<input type="hidden" value="${topic.id}">
<img class="show-info-img " alt="培训主题"
         src="${ filePath }${ topic.photo }" data-toggle="popover" 
	 data-placement="top" title="${ topic.name }"
         data-content="<strong>简介：</strong>${ topic.description }" />

 js代码就改成

$("img.show-info-img").click(function(){
		var topicId=$(this).prev().val(); 
		if(!topicId){
			elert("无效培训话题");
		}else{
			window.open("topic.do?topicId="+topicId);
		}
		
	});  

 顺便说一句，生成的这个

<div class="popover">
<div>

你是可以通过css来修改的，如固定它的宽度

.popover {
	width: 200px;
}