我试图在一个引导弹窗内显示HTML,但不知为何它不工作。我在这里找到了一些答案,但对我没用。如果我做错了什么,请告诉我。

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>

当前回答

我真的很讨厌把长HTML内的属性,这是我的解决方案,清楚和简单(替换?随你喜欢):

<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
    <h2>Some title</h2>
    Some text
</a>

then

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});

其他回答

实际上,如果你在Django中使用Bootstrap5,那么他们将内容作为字符串传递的方法是完美的,并且与Django的模板包含是一致的。你可以用你需要的任何部分HTML创建一个模板文件,例如,Bootstrap5似乎没有x - edititable,所以你可能想要做一个行编辑和Ok|取消按钮作为内容。总之,这就是我的意思:

 <button data-bs-content="{% include './popover_content.html' %}" type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" >
  Click to toggle popover
 </button>

我的settings.py模板部分是这样的:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,     # True is necessary for django-bootstrap5 to work!
        'OPTIONS': {
            'debug': True,
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

我把我的模板(每一个应用程序)在<项目目录>/模板/<应用程序名称>文件夹。我有MyMainApp/popover_content.html右边的MyMainApp/home.html上面的示例代码进行了测试。但是如果你把模板放在每个应用的Django文件夹中,那么你需要在templates [0]{'DIRS': ['MyApp/templates', 'MyApp2/templates']}列表中添加"MyApp/templates"。

因此,至少这将使您能够将弹出窗口HTML以常规的、语法高亮显示的Django模板格式放置,并很好地利用将Django模板模块化为组件。

我个人打算用它来做一个可编辑的标签(标题和描述字段的一些数据在我的应用程序)。

一个缺点是如果你在包含:"{% include './popover_content.html' %}"时使用双引号("),那么你必须在整个popover_content.html'模板中使用单引号。

你还需要为弹出窗口启用html,所以你的站点范围的弹出窗口初始化器会这样:

<script type="text/javascript">
  $(document).ready(() => {
    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(
      function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl, {
          html: true,
        });
      });
  });
</script>

下面是(无样式的)结果。总之,使用默认提供的字符串方法进行传入,并传入一个包含的Django模板文件。问题解决了!

你需要创建一个启用了html选项的弹出窗口实例(将其放在弹出窗口JS代码之后的javascript文件中):

$ (' .popover-with-html ')。弹出窗口({HTML: true});

我使用了一个弹出在一个列表,我通过HTML给出了一个例子

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>

在bootstrap 4.6的最新版本中,您可能还需要使用sanitize:false来添加复杂的html。

$('.popover-with-html').popover({ html : true, sanitize : false })

你不能使用<li href="#",因为它属于<a href="#",这就是为什么它不起作用,改变它,一切都好。

这里是工作的JSFiddle,它向你展示了如何创建引导弹窗。

代码的相关部分如下:

HTML:

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

JavaScript:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

顺便说一下,你总是需要至少$("[data-toggle=popover]").popover();启用弹出窗口。但是在data-toggle="popover"的地方,你也可以使用id="my-popover"或class="my-popover"。只需要记住使用例如:$("#my-popover").popover();在这些情况下。

以下是完整规范的链接: 引导弹窗

奖金:

如果出于某种原因,您不喜欢或无法从数据内容和标题标签中读取弹出窗口的内容。你也可以使用隐藏的div和一些JavaScript。这里有一个例子。