Twitter引导程序弹出窗口的动态放置
Dynamic placement of Twitter-Bootstrap popover
我正在尝试为引导弹出窗口创建一个动态位移函数,这样,如果内容太大,无法在没有垂直滚动的情况下以"底部"位置显示在屏幕上,它将以"顶部"位置向上显示弹出窗口。
为此,我创建了一个函数:
function popoverPlacement(popoverHeight, element) {
var offset = element.offset().top;
var height = popoverHeight;
var docheight = $(document).height();
if (offset + height >= docheight) {
return "top";
}
else {
return "bottom"
}
}
不幸的是,我需要将popoverHeight指定为硬编码值,因为内容是为popover生成的,而不是添加到DOM中,所以我无法获得它的高度。
这就是它的使用方式:
$(this).popover({
placement: function () { return popoverPlacement(270, this.$element); },
title: "Status",
trigger: "click",
content: editStatusContent,
html: true,
delay: {
show: 1,
hide: 1
},
animation: false
});
有没有一种动态的方式来实现这一点?
感谢
您可以通过将popover与内容作为不可见节点附加到文档中来测量popover,如下所示:
var tpl = this.options.template;
var $inner_el = $(this.options.content).clone(false);
var $measure_el = $('.popover-content', tpl).append($inner_el)
.parents('.popover');
$measure_el.css({
visibility: 'hidden',
position: 'absolute'
});
$measure_el.appendTo('body');
actual_height = $measure_el.height();
actual_width = $measure_el.width();
$measure_el.remove();
我发现在显示工具提示后可以使用绝对定位:
$('#liveCallData').tooltip('show');
var tooltip = $('#liveCallData .tooltip');
width = tooltip.width();
定位:
tooltip.css({'position': 'absolute', top: y - 41, left: x - (width / 2) - 1});
相关文章:
- 使用JavaScript根据窗口/视口的高度动态调整图像大小
- javascript skrollr基于动态内容更新窗口高度
- 在highcharts.js中向点弹出窗口动态添加文本
- 带有多个答案选项的Javascript动态数组窗口
- 根据窗口宽度动态更改jQuery滑块选项
- 在浏览器窗口中创建动态灵活的分割标记
- 弹出窗口中的内容不会刷新.如何使动态
- Javascript:动态更改onclick;窗口打开”;
- Twitter 引导弹出窗口不适用于动态生成的内容
- Webdriver:用于动态禁用/启用JavaScript弹出窗口的Firefox配置文件
- 动态弹出窗口'通过调用一个永远运行并返回's每个周期后的数据
- 如何使模式窗口打开动态内容并更改url
- 保留动态创建的下拉列表's在事件窗口.history.back()上选择的值-JavaScript
- 生成动态信息窗口phpJavascript谷歌地图
- 如何使用chrome应用程序窗口动态调整文本区域的大小
- 使用弹出窗口进行动态日期验证
- 无法在调整窗口大小时动态添加类
- 动态窗口.添加元素后的位置 动态.
- 动态窗口语法.开放的方法
- 动态窗口(框)和元素在祝福(nodejs文本UI库)