如何使包含图像的整个 tingle modal 在加载时可见？

Question

加载时，如果浏览器宽度大于 540px，包含图像的模式将被截断（见下图）。我应该怎么做才能使垂直滚动条立即出现？

我正在处理的这个现有项目正在使用 tingle modal plug-in。它是这样链接的：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="tingle.min.css">
    <style>
        html, body {
            height: 100%;
        }

        img {
            height: auto;
            width: 100%;
        }
    </style>
    <title>Tingle Modal</title>
</head>
<body>
    
    <script src="tingle.min.js"></script>
    <script src="modal.js"></script>
</body>
</html>

modal.js 是我创建包含图像的模式的地方：

function createModal(content) {
    let $modal = new tingle.modal({
        footer: false,
        stickyFooter: false,
        closeMethods: ["overlay", "button", "escape"],
        closeLabel: "Close",
        cssClass: ["modal"],
        beforeClose: function() {
            return true; // close the modal
        },
        onClose: function() {
            $modal.destroy();
        }
    });
    $modal.setContent(content);
    $modal.open();
}

createModal("<div id='modal'><img id='sample' src='sample.jpg' /></div>");
console.log(document.getElementById("sample").offsetHeight);

我注意到当您放大或缩小浏览器或调整浏览器大小时，我会得到具有滚动条的预期行为。我还注意到在加载时，图像高度为 0。我无法将图像高度设置为像素值，因为我将有几个模态框包含不同大小的不同图像。

您还可以在此处查看行为：CodeSandbox。请务必先将 CodeSandbox 中的嵌入式浏览器宽度调大，然后刷新看看我的意思。

我尝试了以下方法。但是即使整个模式适合 100vh，它也会添加滚动条，这是不可取的。

.tingle-modal {
    overflow-y: scroll;
}

Answer 1

尝试添加这些样式

.tingle-modal {
    overflow-y: auto;
}

如果需要保存关闭按钮的位置，则添加：

.tingle-modal__close {
    position: sticky;
    align-self: end;
}

而不是

  createModal("<div id='modal'><img src='sample.jpg' /></div>");

使用它

const img = new Image();
img.onload = () => {
  createModal("<div id='modal'><img src='sample.jpg' /></div>");
};
img.src = "sample.jpg";

Answer 2

我查看了tingle.min.js中的代码。它检查模态框的高度是否溢出，如果是，它添加一个 tingle-modal--overflow class。但是，检查高度时图像尚未加载。所以我不得不在调用 createModal 函数后重做检查，如下所示：

document.getElementsByTagName("img")[0].onload = function() {
    const $modal = document.getElementsByClassName("tingle-modal")[0];
    if (window.innerHeight <= $modal.clientHeight)
        $modal.classList.add("tingle-modal--overflow");
};

这是解决方案的 jQuery 版本：

$(".tingle-modal-box img").on("load", function() {
    const $modal = $(".tingle-modal");
    if (window.innerHeight <= $modal.height())
        $modal.addClass("tingle-modal--overflow");
});

如何使包含图像的整个 tingle modal 在加载时可见？

How do I make the entire tingle modal containing an image visible on load?

html

javascript

css

image

scrollbar