gpt4 book ai didi

javascript - 模态和输入组插件中的 Bootstrap 弹出窗口

转载 作者:行者123 更新时间:2023-12-03 07:16:28 25 4
gpt4 key购买 nike

我无法让 Bootstrap 3.3.5 弹出窗口正常工作。我希望当鼠标悬停在 input-group-addon 上时弹出窗口变得可见,但什么也没有发生。

我当前的代码:

Javascript:

    $(document).ready(function () {
$("[data-toggle=popover]").popover({ trigger: 'hover', container: '#imgPopover'});
});

HTML

<div class="input-group">
<button id="imgPopover" type="button" class="input-group-addon" data-toggle="popover" data-placement="bottom" data-content="Content" data-trigger="hover">
<img src="~/images/absolent-logo.gif" style="max-height: 20px" />
<span data-bind="html: $parents[1].text.qTempHeader"></span>
</button>
<input type="number" class="form-control" data-bind="value: qTemp"/>
</div>

我尝试了很多不同的方法,但似乎没有任何效果。如果能朝着正确的方向插入,我们将不胜感激。

最佳答案

问题出在 container: '#imgPopover' 属性上,div 太小而无法包含弹出框。将其更改为 body 及其工作原理。

    $(document).ready(function () {
$("[data-toggle=popover]").popover({ trigger: 'hover', container: 'body'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="input-group">
<button id="imgPopover" type="button" class="input-group-addon" data-toggle="popover" data-placement="bottom" data-content="Content" data-trigger="hover">
test me
</button>

</div>

关于javascript - 模态和输入组插件中的 Bootstrap 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36403241/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com