使用20px' margin'定位bootstrap popover到窗边

时间:2017-11-02 11:18:23

标签: javascript twitter-bootstrap popover bootstrap-popover

我被问到是否可以通过左右窗口边缘来获取自举式弹出窗口。我一直在阅读自助站点,系绳站点和SO ..
Changing the position of Bootstrap popovers based on the popover's X position in relation to window edge?
...但到目前为止还没有找到可以在窗口的左右边缘设置最小像素距离的东西。
我试图获得打开的popover的.css(' left')值,但我得到的是“未定义的”#。

我有一个指向以下函数的onclick属性的链接(除定位问题外,正确初始化popover)...

function emailCertificateClick(e) {
    var emailLink = $(e);
    var attemptId = $(emailLink).attr("data-attempt-id");
    var url = "/CL/MyTraining/EmailCertificate/?attemptId=" + attemptId;
    $.get(url, function (data) {

        var popover = emailLink.data('bs.popover');

        if (data && data.Result == "Success") {
            popover.options.title = '<div class="certificate-email-success-popover-title">';
            popover.options.title += '<span class="fa fa-check">';
            popover.options.title += '<svg>';
            popover.options.title += '<use xlink:href="/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-check"></use>';
            popover.options.title += '</svg>';
            popover.options.title += certificateSentSuccessfullyTitle;
            popover.options.title += '</span>';
            popover.options.title += '</div >';
            popover.options.content = certificateSentSuccessfullyMessage + ' <b>' + data.Email + '</b>';
        }
        else {
            popover.options.title = '<div class="certificate-email-error-popover-title">';
            popover.options.title += '<span class="fa fa-times">';
            popover.options.title += '<svg>';
            popover.options.title += '<use xlink:href="/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-times"></use>';
            popover.options.title += '</svg>';
            popover.options.title += certificateEmailFailedTitle;
            popover.options.title += '</span>';
            popover.options.title += '</div >';
            popover.options.content = certificateEmailFailedMessage;
        }

        popover.show();
        var $popover = $('.my-training-certficate .popover'); 
        console.log("$popover = " + $popover); // [object Object]
        var popoverXPosition = $popover.css('left');
        console.log("popoverXPosition = " + popoverXPosition); // undefined       
    });

    return false;
}

检查dev工具中的打开popover,我可以看到popover确实将其css(&#39; left&#39;)设置为&#39; -165px&#39;。我无法找到设置的方式或位置。

是否有最好的做法,非解决方法来防止引导弹出窗口触及窗口边缘?欢呼声。

0 个答案:

没有答案