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

Posted 2023-02-22

【中文标题】我可以在 Bootstrap 弹出窗口中使用动态内容吗？

【英文标题】：Can I use dynamic content in a Bootstrap popover?

【发布时间】：2014-02-22 21:45:22

【问题描述】：

我在显示推荐的“重复区域”中使用 Bootstrap 弹出框。每个推荐都有一个“查看属性详细信息”按钮，可以打开弹出框。在弹出窗口中，我想显示与每个推荐和图像细节相关的图像。图像路径存储在数据库的列中，因此要显示每个推荐的图像，我需要将图像源绑定到内容，但它不接受 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']; ?>"          /></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();
    
);

【参考方案3】：

这是通用方法，但使用 ASP.Net 处理程序来处理图像。在PHP中使用类似的东西来动态生成图片

<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 : getPopoverContent(this)// hope this should be link
);
);

function getPopoverContent(this)

 return '<div id="popOverBox"><img src="/getImage.php?id="'+this.data("image-id")+' 
   /></div>'

</script>

<a href="#" rel="details" class="btn btn-small pull-right" 
data-toggle="popover"     data-image-id="5" data-content="">View Property</a>

【参考方案4】：

$("selector").popover(
        trigger : "manual",
        placement : 'right',
        html : true,
        template : '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
    ).popover("show");

    $.ajax(
        async : true,
        url : url,
        dataType : 'json',
        success : function(d) 
            $("#phover" + id).attr('data-original-title', d['heading']);
            $('.popover-title').html(d['heading']);
            $('.popover-content').html(d['body']);
        ,
        beforeSend : function() 
            var loadingimage = '<div align="center"><img src="assets/pre-loader/Whirlpool.gif"></div>';
            $('.popover-title').html(loadingimage);
            $('.popover-content').html(loadingimage);
        
    );

【参考方案5】：

我的解决方案是基于这里以前的解决方案，还有更多。 我需要（通常）所有的复杂性： 这是事件触发时按需创建弹出框内容的方法， 并将所选元素传递给创建函数。

function displayProductPrice(a, tag) 
    var div = a.closest('div');
    var secs = ['aggregated', 'compare', 'list', 'saved', 'details'];
    var title = '';
    for (var c in secs) 
        var obj = $('.product-price-' + secs[c], div);
        if (obj.length) 
            if (title) 
                title += '<br />';
            
            title += obj.html();
        
    
    return '<' + tag + '>' + title + '</' + tag + '>';

$( document ).ready(function() 
  $(".product-price-expand").popover(
        content: function() return displayProductPrice(this, 'h6'),
        title: function()                 
            return $('.product-id', this.closest('div')).html();
        ,
        html: true,
        trigger: 'click focus',
        placement: 'auto'
    );
);

享受吧，希望对你有帮助。