gpt4 book ai didi

javascript - Bootstrap Popover - 图像出现在错误的位置,直到第二次单击

转载 作者:行者123 更新时间:2023-11-28 05:03:42 25 4
gpt4 key购买 nike

我的页面上有许多按钮,单击这些按钮时应在 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/

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