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

On load and if browser width is greater than 540px, the modal containing an image is cut-off (see figure below). What should I do to make the vertical scroll-bar immediately appear?

This existing project that I'm working on is using tingle modal plug-in. It is linked like so:

<!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 is where I create the modal containing the image:

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);

I noticed that when you zoom-in or zoom-out, or resize the browser, I then get the expected behavior of having the scroll-bar. I also noticed that on load, the image height is 0. I can't set the image height to a pixel value because I'll have several modals containing different images that vary on sizes.

You can also see the behavior here: CodeSandbox. Please do make the embedded browser width in CodeSandbox bigger first, then refresh to see what I mean.

I have tried the following. But it then adds the scroll bar even when the entire modal fits in 100vh, which is not desirable.

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

CodePudding user response：

Try adding these styles

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

If you need to save the position of the close button, then add:

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

And instead of

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

use it

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

CodePudding user response：

I looked at the code in tingle.min.js. It checks if the height of the modal overflows, if so, it adds a tingle-modal--overflow class. However, the image isn't loaded yet when it checked the height. So I had to redo the checking like so:

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

Here's a jQuery version of the solution:

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