微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在表格内部使用bootstrap 3 popover不会显示在按钮顶部

如何解决在表格内部使用bootstrap 3 popover不会显示在按钮顶部

需要弹出框才能显示用户列表,但不显示在按钮顶部。

demonstration

这是jQuery代码

$('[data-toggle="popover"]').popover();

这是表行内动态按钮的C#代码

<br />
<button title='" + User List + @"' data-original-title='' type='button' class='btn btn-default popovers' data-toggle='popover' data-placement='top' data-html='true' data-content='" + rtnStr + "'>" + Show Users + @"</button>

解决方法

此问题通过计算元素的自定义宽度并找到弹出框的确切位置来解决。

这是jQuery代码

$(document).on('click','[data-toggle=popover]',function (e) {
            $('[data-toggle=popover]').not(this).popover('hide');
            var x = ($(window).width() - ($(this).offset().left + $(this).outerWidth().width()));
            $(this).popover('show');
            $('.popover').css({ "right": (x - 116) + "px","left": "auto" });
        });

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。