• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

HTML CSS Modal Popup Problems

Explorer ,
Aug 01, 2021 Aug 01, 2021

Copy link to clipboard

Copied

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

TOPICS
Code

Views

1.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Aug 02, 2021 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. 

Votes

Translate

Translate
Community Expert ,
Aug 01, 2021 Aug 01, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 02, 2021 Aug 02, 2021

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 02, 2021 Aug 02, 2021

Copy link to clipboard

Copied

LATEST

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. 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 02, 2021 Aug 02, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines