javascript – Tingle Modal Issue when It Contains Images

html - Animation after toggling doesn't apply the second style

I’m working on an existing project that is using tingle modal plug-in. I have linked it like so:

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

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

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() {

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

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

Image is cut-off

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 the 100vh, which is not desirable.

.tingle-modal {
    overflow-y: scroll;

Source link

Leave a reply

Please enter your comment!
Please enter your name here