我可以在 Bootstrap 弹出框中使用动态内容吗？

php javascript jquery twitter-bootstrap popover

2022-08-30 21:00:34

我正在“重复区域”中使用Bootstrap Popover，它显示推荐书。每个推荐都有一个“查看物业详细信息”按钮，可以打开弹出窗口。在Pop over中，我想显示与图像的每个推荐和细节相关的图像。图像路径存储在数据库中的一列中，因此要显示每个推荐的图像，我需要将图像源绑定到内容，但它不接受PHP。我正在使用一个脚本，允许我将html写入内容，但图像需要动态创建。动态文本适用于“a”标签“标题”选项，但不适用于内容。

任何人都可以阐明这一点吗？

这是我所拥有的。

<script type="text/javascript">
 $(document).ready(function() {
  $("[rel=details]").popover({
  placement : 'bottom', //placement of the popover. also can use top, bottom, left or     right
  html: 'true', //needed to show html of course
  content : '<div id="popOverBox"><img src="<?php echo $row_rsTstmnlResults['image']; ?>"        width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
    <a href="#" rel="details" class="btn btn-small pull-right" data-toggle="popover"     title="<?php echo $row_rsTstmnlResults['property_name']; ?>" data-content="">View Property</a>

答案 1

var popover = $("[rel=details]").popover({
    trigger: 'hover',
    placement: 'bottom',
    html: 'true'
}).on('show.bs.popover', function () {
    //I saw an answer here  with 'show.bs.modal' it is wrong, this is the correct, 
    //also you can use   'shown.bs.popover to take actions AFTER the popover shown in screen.
    $.ajax({
        url: 'data.php',
        success: function (html) {
            popover.attr('data-content', html);
        }
    });
});

答案 2

一岁:(但这可能有助于另一个人

删除您的 js 脚本并添加此：

var content = $('[id*="yourDivId"]');
var title = "Your title, you can use a selector...";

$('[data-toggle="popover"]').popover({
    html: true,
    content: function () {
        return content.html();
    },
    title: function() {
      return title.html();
    }
});