javascript - bootstrap的popover.js自定义弹出内容问题

问题描述

问 题

上面图片是bootstrap中popoer的js自定义的文档说明，如果要在js中写自己想要弹出的内容，下面是我照文档写的，template那里用了es6插入大段html用的``这个符号应该是可以的吧。

$(function() {
  $('[data-toggle="popover"]').popover({
    html: true,
    trigger: "click",
    placement: 'bottom',
    template: `<div class="popover" role="tooltip">
                  <div class ="arrow"></div>
                  <h3 class ="popover-title">SELECT A DATE</h3>
                  <div class ="popover-content">
                    <p>asdadqweqrqq</p>
                  </div>
                </div>`
  });
})

html:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover">点我弹出/隐藏弹出框</button>

先说明，把template去掉加上title和content两个属性，能弹出内容。但是我现在想插入大段的html元素，请问我上述代码哪里出问题了？

解决方案

看了Stack Overflow上的一个答案，原来template是做一个模板，而content和title是内容，必须的。

html：

<button id="as" type="button" class="btn btn-lg btn-danger" data-toggle="popover">点我弹出/隐藏弹出框</button>

js：

$(function() {
  var template = [
    '<div class="popover">',
    '<div class="arrow"></div>',
    '<div class="popover-title"></div>',
    '<div class="popover-content"></div>',
    '</div>'
  ].join("");
  
  var title = ['<h3 class ="popover-title">SELECT A DATE</h3>'].join("");
  var content = [
    '<p>asdadqweqrqq</p>'
  ].join("");
  
  $('[data-toggle="popover"]').popover({
    html: true,
    trigger: "click",
    placement: 'bottom',
    title: title,
    content: content,
    template: template
  });
})

这篇关于javascript - bootstrap的popover.js自定义弹出内容问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！