簡體   English   中英

Bootstrap PopoverX方法未觸發

[英]Bootstrap PopoverX Methods Not Firing

我一直在嘗試使引導擴展程序popover X正常工作( http://plugins.krajee.com/popover-x

我設置了一個JS小提琴( http://jsfiddle.net/wp80d5ux/2/ ),但是彈出窗口似乎沒有加載。

以下是我的示例。

我加載庫不正確嗎?

<BR><BR><BR><BR><button id="#btn1" class="btn btn-primary btn-lg">Top</button>
<script>
$(document).on('ready', function() {
    // initialize popover on click of `#btn1`
    $('#btn1').popoverButton({
        target: '#myPopover1'
    });
    // or alternatively initialize popover on hover of `#btn1`
    $('#btn1').popoverButton({
        target: '#myPopover1',
        trigger: 'hover focus'
    });
});
</script>

這在本地為我工作,但由於某種原因我無法使其在jsfiddle上工作...(在plnkr工作

<BR><BR><BR><BR><button type="button" id='btn1' class="btn btn-primary btn-lg">Top</button>


<div id="myPopover1" style='display:none' class="popover popover-x popover-default">
    <div class="arrow"></div>
    <div class="popover-header popover-title"><button class="close" data-dismiss="popover-x">&times;</button>Title</div>
    <div class="popover-body popover-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="popover-footer">
        <button type="submit" class="btn btn-sm btn-primary">Submit</button><button type="reset" class="btn btn-sm btn-secondary">Reset</button>
    </div>
</div>

<script>
$(document).ready(()=>{
    $('#btn1').popoverButton({
        target: '#myPopover1'
    });       
})
</script>

Bootstrap 4代碼在這里

 <div id="myPopover2" style="display: none" class="popover popover-default">
        <div class="arrow"></div>
        <div class="popover-title"><span class="close pull-right" data-dismiss="popover-x">&times;</span>Title</div>
        <div class="popover-content">
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aeneancommodo ligula eget dolor. Aenean massa.</p>
        </div>
 </div>
 <button type="button"  id='weinz' class="btn btn-secondary">
      Popover on top
 </button>
<script>
    $(document).ready(()=>{
       $('#weinz').popover({
        content:$('#myPopover2')
       }) 
    })
    </script>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM