Question

我正在尝试用AJAX填充我的通知popover。我在同一页面上有两个弹出窗口。另一个popover的内容由PHP填充。 AJAX工作得很好。

问题是通知弹出窗口显示在其他弹出窗口的位置，而不是在我点击的位置。仅当从AJAX获取数据内容时才会出现此问题。从PHP或某些字符串生成的内容按预期工作。

以下是AJAX popover的代码：

$(document).ready(function() {
    $('#npop').popover({
    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content" style="padding:0px;overflow-y:auto;max-height:450px;"><p></p></div></div></div>',
    html: true,
    placement: 'bottom',
    title: 'Notifications',
    content: function(){
       var div_id =  "tmp-id-" + $.now();
       return details_in_popup(div_id);
    }
  });
});
function details_in_popup(div_id){
    $.ajax({
        url: "<?php echo base_url('pull_notify'); ?>",
        success: function(response){
           $('#'+div_id).html(response);
        }
    });
    return '<div id="'+ div_id +'">Loading...</div>';
}

这是我的HTML元素：

<div class="notification-icon navbar-brand">
    <span>
        <a style="color: #008ae6;font-size:25px;" id="npop" class="glyphicon glyphicon-bell" role="button" data-toggle="popover" ></a></span>
    <span id="bad" class="badge badge-notify"></span>
</div>

Answer 1

好解决了这个问题。用

更改了返回div

return '<div id="'+ div_id +'" style="width: 400px; padding-right: 10px">Loading...</div>';

显然，修复方法是在div中添加一个指定宽度的样式，并在模板中添加一些css。以下是代码

$('#npop').popover({   
        template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content" style="padding:0px;overflow-y:auto;max-height:450px; width: 400px"><p></p></div></div></div>',     
        html: true,
        placement: 'bottom',
        title: 'Notifications',
        content: function(){
            var div_id =  "tmp-id-" + $.now();
            return details_in_popup(div_id);
            }
        });
});
    function details_in_popup(div_id){
        $.ajax({
            url: "<?php echo base_url('pull_notify'); ?>",
            success: function(response){

            $('#'+div_id).html(response);
            }
        });
        return '<div id="'+ div_id +'" style="width: 400px; padding-right: 10px">Loading...</div>';
    }

PS：我也在使用下面的CSS，

.popover{
     max-width: 600px !important;
     max-height: 500px !important;

   }
   .popover div{
    overflow-x: hidden !important;
   }

PHP Ajax Bootrstrap popover放置问题

1 个答案: