我的页面上有许多按钮，单击这些按钮时应在 Bootstrap Popover 内显示内容。内容是从我的数据库加载的，可以是文本，也可以是大小不同的图像。我已经实现了一个在 IE 中可以正常工作的解决方案，但是在 Chrome 和 Firefox 中，当您第一次单击时，我的弹出窗口会在页面的中间位置打开按钮。第二次单击同一按钮时，图像将出现在正确的位置，不会出现任何问题，就像在 IE 中一样。如果弹出窗口的内容是文本，那么它首次在所有浏览器中显示正确，但在 Chrome 和 Firefox 中图像会出现问题。我对此进行了研究，但找不到任何可以帮助它在所有浏览器上工作的东西。任何帮助都会很棒。
HTML
<button type="button" class="btn btn-default btn-xs" data-toggle="popover" data-container="body" data-content="@item.Content">@item.Title</button>
JS
$(document).ready(function () {
$('[data-toggle="popover"]').popover({
html: "true",
placement: "top",
});
});
CSS
popover{
width:auto!important;
max-width: none;
}
最佳答案
我认为问题(至少对我来说是这样)是缓存问题。单击按钮，弹出窗口加载其内容，<img />标签被添加到 DOM 并开始获取，弹出窗口呈现，获取完成并被 block 传输到屏幕。
我发现的最佳解决方案是预加载/图像。有两种方法可以做到这一点。如果您提前知道图片网址，可以添加 preload link 。或者，您可以将包含图像标签的弹出窗口内容放置在 <div class="d-none">...</div> 中。 (或者 class="hidden" 如果您使用的是 bootstrap 3)。
<html>
<head>
<!-- case where image urls are known ahead of time -->
<link rel="preload" as="image" href="my-image.png" />
</head>
<body>
<!--
case where image urls are NOT known ahead of time
NOTE: @item.Content should not include <script> tags or the code will be run twice
-->
<div class="d-none">
@item.Content
</div>
<button type="button" class="btn btn-default btn-xs" data-toggle="popover"
data-container="body" data-content="@item.Content">
@item.Title
</button>
<script>
$(document).ready(() =>
$('[data-toggle="popover"]').popover({
html: "true",
placement: "top",
});
});
</script>
</body>
</html>
关于javascript - Bootstrap Popover - 图像出现在错误的位置，直到第二次单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41934371/