Question

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

<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标记。您已在data-content内添加了一些html。

而是尝试这样： -

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;
}

Demo

另一种选择是在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");
    }
}

在弹出窗口中放置两个html按钮

2 个答案:

HTML

JS

的CSS

Demo