1

我正在使用 TwentyTwenty jQuery 库来让我有 2 个带有前后滑块的图像，我想在 Bootstrap 模式中显示这些图像。

但是，一旦我单击缩略图图像打开模态，图像不会显示在模态中，直到我调整浏览器的大小（我可以将其调整 1px，然后它会立即显示）。

我试过使用 window.dispatchEvent(new Event('resize')); 到浏览器计算图像所需的高度，但它不起作用。JavaScript（或jQuery）中是否有一些功能可以强制浏览器显示图像？

页面在这里：

http://turfectsolutions.chrisstclair.co.uk/Gallery/

谢谢！:)

4

1 回答 1

0

派对迟到了，但我想出了一个修复我的设置（chrome - asp.net core razor page, Twenty Twenty, style:height = 0 但仅在调整大小时显示（不滚动））

我在标记中添加了一个容器 - 修复了一些但间歇性的。我读过论坛说二十二十只在SHOWN div上触发，或者可见性：可见。

将 OnClick 事件添加到触发模式的按钮/锚点。

 <button type="button" onClick="modalButtonClick()" 
                        class="btn btn-info btn-lg" 
                        data-toggle="modal"
                        data-target="#myModal">Bigger?</button>

该函数将显示模态，然后调用二十二十个函数来格式化图像。警报只是用于测试以确保正在调用该函数。

function modalButtonClick() {
            $("#myModal").show();
            $("#before_after_container1modal").twentytwenty();
            alert("I am an alert box!");
        }

我相信有更好的方法，但这似乎可行 - 如果有人有更好的建议，我全都学习了:)

于 2018-08-07T16:52:09.297 回答