PHP Ajax Bootrstrap弹出式广告位置问题

我想通过AJAX填充通知弹出窗口。我在同一页上有两个弹出窗口。其他popover的内容由PHP填充。该AJAX工作正常。PHP Ajax Bootrstrap弹出式广告位置问题

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

下面是对AJAX酥料饼代码：

$(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>

来源

2017-02-10 akshay khairmode

好的解决了这个问题。改变与

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; 
    }

来源

2017-02-10 11:40:03

PHP Ajax Bootrstrap弹出式广告位置问题

回答

相关问题