twitter-bootstrap - 在弹出框内放置两个 html 按钮

Question

我目前正在尝试在弹出窗口中插入一些自定义 HTML。我只是想将以下 HTML 添加到弹出框：

<button class="btn btn-large btn-primary" type="button">Button 1</button>
<button class="btn btn-large btn-succes" type="button">Button 2</button>

我尝试了以下 HTML 设置：

<div id="voteSubText"
data-toggle="popover"
data-placement="top"
data-content="
<div><button class="btn btn-large btn-primary" type="button">Button 1</button></div>
<div><button class="btn btn-large btn-succes" type="button">Button 2</button></div>
"
title="title"
data-original-title="title">div text</div>

我的 JS：

$('#voteSubText').popover({ html : true });

但是，这是行不通的。关于我做错了什么的任何建议？

Answer 1

您的 HTML 本身无效。属性内不能有 html 标签。您已经添加了一些 html，就像里面一样data-content。

而是尝试这样：-

html

<div id="voteSubText" data-toggle="popover" data-placement="bottom" title="title" data-original-title="title">eller</div>

<!--Add a separate section for buttons-->
<div class="buttons">
    <div>
        <button class=" btn btn-large btn-primary " type="button ">Button 1</button>
    </div>
    <div>
        <button class="btn btn-large btn-succes " type="button ">Button 2</button>
    </div>
</div>

JS

$('#voteSubText').popover({
    html: true,
    content: $('.buttons').html(), // Select the html from button
    trigger: 'click'
});

CSS

//Hide the buttons div which is in DOM.
.buttons {
    display:none;
}

演示

另一种选择是不将按钮保留在 DOM 中。您可以在脚本中执行此操作。但据我说，这使得它的可维护性降低。

var buttons='<div><button class=" btn btn-large btn-primary " type="button ">Button 1</button></div> <div><button class="btn btn-large btn-succes " type="button ">Button 2</button> </div>';

$('#voteSubText').popover({
    html: true,
    content: buttons,
    trigger: 'click'
});

Answer 2

///HTML with hyperlink
      <div id="btnSave_popover" class="div-popover">
        <div>
          <a id="btnSave">SAVE</a>
        </div>
        <div >
            <a id="btnTemplate" > TEMPLATE</a>
        </div>
      </div>


///Css classes for popover

        .div-popover {
            background-color: white;
            border-radius: 8px !important;
            box-shadow: -1px 1px 9px 5px rgba(0,0,0,0.4);
            font-size: 12px;
            padding: 7px 10px;
            position: absolute;
            width: 250px;
            bottom: -4px;
        }

        .div-popover:after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 175px;
            border-style: solid;
            border-width: 25px 25px 0;
            border-color: #FFFFFF transparent;
        }
        .hidden {
         display: none !important;
        }
///JQuery for button click 

$("#btnSave").click(function () {
    if ($("#btnSave_popover").hasClass("hidden")) {
        $("#btnSave_popover").removeClass("hidden");
    } else {
        $("#btnSave_popover").addClass("hidden");
    }
}