HTML CSS Modal Popup Problems

Report · Aug 01, 2021

I want to modal popups activated by buttons (actually image-links), but I am facing several problems. I am using the W3 Schools example as a starting point - At https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal . The first issue is that I want to move the CSS selectors to a linked external CSS file, rather than leave them in the HTML section. But as soon as I move any of the selectors, the activating button dissapears. Sure I must be missing something basic. I have copied the code here - below.

<!DOCTYPE html>
<html>
    <head>
      <!-- --------------- IF I LINK TO EXTERNAL STYLESHEET BUTTON DISAPPEARS -->
        <!-- <link href="css/global.css" rel="stylesheet" type="text/css" /> -->
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            body {
                font-family: Arial, Helvetica, sans-serif;
            }

            /* The Modal (background) */
            .modal {
                display: none; /* Hidden by default */
                position: fixed; /* Stay in place */
                z-index: 1; /* Sit on top */
                padding-top: 100px; /* Location of the box */
                left: 0;
                top: 0;
                width: 100%; /* Full width */
                height: 100%; /* Full height */
                overflow: auto; /* Enable scroll if needed */
                background-color: rgb(0, 0, 0); /* Fallback color */
                background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
            }

            /* Modal Content */
            .modal-content {
                background-color: #fefefe;
                margin: auto;
                padding: 20px;
                border: 1px solid #888;
                width: 80%;
            }

            /* The Close Button */
            .close {
                color: #aaaaaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

            .close:hover,
            .close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <h2>Modal Example</h2>

        <!-- Trigger/Open The Modal -->
        <button id="myBtn">Open Modal</button>

        <!-- The Modal -->
        <div id="myModal" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span>
                <p>Some text in the Modal..</p>
            </div>
        </div>

        <script>
            // Get the modal
            var modal = document.getElementById("myModal");

            // Get the button that opens the modal
            var btn = document.getElementById("myBtn");

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            // When the user clicks the button, open the modal
            btn.onclick = function () {
                modal.style.display = "block";
            };

            // When the user clicks on <span> (x), close the modal
            span.onclick = function () {
                modal.style.display = "none";
            };

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function (event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            };
        </script>
    </body>
</html>

I'll bring up the second issue when I get this bit sorted.

Thanks in advance

Report · Aug 01, 2021

This points to a scripting error. The CSS file that I created looks like

body {
    font-family: Arial, Helvetica, sans-serif;
}

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

And it works without a problem.

Make sure that you do not include <style> and </style> in the CSS file.

Wappler, the only real Dreamweaver alternative.

Report · Aug 02, 2021

Theres most likely something in your stylesheet which is causing the activating button to disappear. If the suggestions provided so far do not work then look for any css which might relate to your button and see if any properties have been set which may cause it to disappear.

If youre still experiencing issues then upload your page and provide a link to it. Im sure someone will be able to identify what the issue is.

Report · Aug 02, 2021

Thanks Osgood - That was exactly the problem. There was a redundant myBtn lurking in the CSS file. I try to rename all the myThis and myThat bits when trying new things but that one escaped. 🙂

Report · Aug 02, 2021

You want us to take it on faith that you haven't made critical code mistakes in other places that we can't see which rarely happens. So it's impossible to diagnose what's wrong without seeing the whole document and supporting scripts. Indeed, your 2nd problem could be related to your 1st problem. We don't know until you upload your work and post the URLs.

Nancy O'Shea— Product User, Community Expert & Moderator

HTML CSS Modal Popup Problems

1 Correct answer