[英]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">×</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">×</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.