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;
}