我需要使用 Twitter Bootstrap 3.0 制作一个显示 iframe 的弹出窗口,它应该使用 href 的 onmouseover 事件根据链接中提供的值显示 iframe。
我得到了第一个链接,但在 3.0 中没有,但在 2.0.2 中,但是第二个链接应该更改变量的值并显示不同的 iframe,我似乎不知道该怎么做.
$(window).load(function(){
var img = '<iframe frameborder="0" scrolling="no" height="220" width="420"
src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>';
$("#blob").popover({title: 'Last 10 spots for the selected station', content: img});
})
<a href="#" id="blob" class="btn large primary" rel="popover" style="margin-top:
100px">hover for popover</a>
<a href="#" id="blob" class="btn large primary" rel="popover" onmouseover=""var img =
'<iframe frameborder="0" scrolling="no" height="220" width="420"
src="http://google.com"></iframe>';"" style="margin-top: 100px">hover for popover</a>
最佳答案
我相信你过于复杂了。
- #1 你有重复的id,你应该分配唯一的id
- 你有语法错误。查看控制台。
- 如果您需要在悬停时显示 bs popover,您只需在 bs popover 设置中设置目标或作为数据属性。
- 您需要将 iframe 显示为上下文而不是 iframe 的 html 文本代表,因此您需要设置
data-trigger = "hover"
或在设置中。 - 您需要通过调用构造函数初始化popover或将对象转换为popover,原因在文档中说明如下:
For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.
HTML:
<a href="#" id="blob" class="btn large primary" rel="popover" style="margin-top:
100px">hover for popover</a>
<a href="#" id="blob2" class="btn large primary" data-trigger="hover" rel="popover" data-html="true" data-content='<iframe frameborder="0" scrolling="no" height="220" width="420"
src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>' style="margin-top: 100px">hover for popover</a>
JS:
$(window).load(function(){
var img = '<iframe frameborder="0" scrolling="no" height="220" width="420" src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>';
$("#blob").popover({title: 'Last 10 spots for the selected station', content: img, html:true});
$('[rel="popover"]').popover();
})
关于javascript - 在 Twitter Bootstrap 3.0 中滚动时使用 href 动态设置 popover 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19371219/