1

現在、ポップオーバーにカスタム 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 });

ただし、これは機能していません。私が間違っていることについて何か提案はありますか？

4

2 に答える 2

3

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

デモ

もう 1 つのオプションは、ボタンを 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'
});
于 2013-05-13T16:08:16.747 に答える
0 
///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");
    }
}
于 2019-04-15T08:52:38.643 に答える