Question

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

然而，一旦我点击缩略图图像打开模态，图像就不会显示在模态中，直到我调整浏览器的大小（我可以将其调整为1px，然后直接显示）。

我尝试过使用window.dispatchEvent（新事件（＆＃39;调整大小＆＃39;））;到浏览器计算图像所需的高度，但它不起作用。 JavaScript（或jQuery）中是否有一些强制浏览器显示图像的功能？

页面在这里：

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

谢谢！：）

Answer 1

晚些时候参加聚会，但我想出了解决方法（chrome-asp.net核心剃须刀页面，二十二十，样式：高度= 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!");
        }

我确信有更好的方法，但这似乎行得通-如果有人对我的学习有更好的建议：）

自举模式内的响应图像 - 直到我调整窗口大小才显示

1 个答案: