Question 298606 in Html Question posted in
Some basic documentation can be found here.

Modals using HTML and Javascript

I am trying to make 2 modals that are triggered by their corresponding buttons. This is my code:

<!-- Trigger/Open The Modal -->
<p><button id="seeBtn" type="button">SEE</button></p>

<p><button id="hearBtn" type="button">HEAR</button></p>
<!-- The Modal -->

<div class="modal modal-content" id="seeModal">
    <span class="close">&times;</span>

    <p>See their profile</p>
    <p>See their profile</p>
    <p>See their profile</p>
    <p>See their profile</p>
</div>
<!-- The Modal -->

<div class="modal modal-content" id="hearModal">
    <span class="close" id="close">&times;</span>

    <p>Hear their Stories</p>
    <p>Hear their Stories</p>
    <p>Hear their Stories</p>
    <p>Hear their Stories</p>
</div>

<script>
    const seeModal = document.getElementById("seeModal");
    const hearModal = document.getElementById("hearModal");

    const seeBtn = document.getElementById("seeBtn");
    const hearBtn = document.getElementById("hearBtn");

    const closeModal = document.getElementById("close");

    itemModal = function(modal,open,close) {
        var modal;
        var open;
        var close;
        open.addEventListener("click", function(){modal.style.display = "block";});
        close.onclick = function(){modal.style.display = "none";};
    }

    itemModal(seeModal,seeBtn,closeModal);
    itemModal(hearModal,hearBtn,closeModal);
</script>

The code above is working–sort of. The "seeModal" will open, but won’t close. The "hearModal" will do both perfectly fine.

I’m not sure if it has anything to do with it, but I am inputting this into an HTML block in Omeka S. That is probably why the <dialog> modal methods wouldn’t work.

I have tried both "addEventListener" and "onclick"–both of which CodePen told me were null. I tried the <dialog> modal method (seen here: https://youtu.be/TAB_v6yBXIE?si=GM9fpckBCpePWf6N), but I have a feeling Omeka S’s HTML purifier wasn’t familiar with it since the code came out rather mangled when I tried. I also tried arrow functions, and got a blank look ("huh?") from my computer when I clicked on my buttons and expected something to happen. When I copy and pasted W3School’s modal tutorial (https://www.w3schools.com/howto/howto_css_modals.asp#gsc.tab=0), it worked fine until I wanted to replicated it for multiple buttons. When I looked to Azurespeed’s ChatGPT Code Generator (https://www.azurespeed.com/ChatGPT/GenerateCode), something came out undefined. I know I’m rusty at JS, but this makes me feel like banging my head against a wall.

My goal is to click on a button and have the corresponding modal appear. When someone is done looking at the modal, they can click on the close button for it to go away. The action needs to be repeatable and easy to set up for multiple buttons. Mostly I need help figuring out why the functions seem to work, but only part of the time.

Tags:

2

Answers


  1. 0

    It looks like you have only one close button with id="close" and you passing the same reference to the itemModal function.

    One easy way you can solve it by looks up for a close button inside itemModal function. In this case you don’t need to pass it outside and your modal will pick one that located inside a modal itself. Here is an example:

    const seeModal = document.getElementById("seeModal");
const hearModal = document.getElementById("hearModal");

const seeBtn = document.getElementById("seeBtn");
const hearBtn = document.getElementById("hearBtn");

itemModal = function(modal,open){
  var modal;
  var open;
  var close = modal.querySelector('.close');
  open.addEventListener("click", function(){modal.style.display = "block";});
  close.onclick = function(){modal.style.display = "none";};
}

itemModal(seeModal,seeBtn);
itemModal(hearModal,hearBtn);
    Login or Signup to reply.
  2. 0

    In your code, you have id="close" for the close button in the "hearModal". However, when you’re trying to select it in JavaScript, you’re using const closeModal = document.getElementById("close");, which only selects the first element with the ID of "close", which is associated with the "hearModal" close button.

    Check the below example, this may get you some idea.

    const seeModal = document.getElementById("seeModal");
const hearModal = document.getElementById("hearModal");

const seeBtn = document.getElementById("seeBtn");
const hearBtn = document.getElementById("hearBtn");

const seeCloseModal = document.getElementById("seeClose");
const hearCloseModal = document.getElementById("hearClose");

const closeSeeModal = function () {
    seeModal.style.display = "none";
};

const closeHearModal = function () {
    hearModal.style.display = "none";
};

seeBtn.addEventListener("click", function () {
    seeModal.style.display = "block";
});

hearBtn.addEventListener("click", function () {
    hearModal.style.display = "block";
});

seeCloseModal.addEventListener("click", closeSeeModal);
hearCloseModal.addEventListener("click", closeHearModal);
    .modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modal Example</title>
</head>
<body>

    <!-- Trigger/Open The Modal -->
    <p><button id="seeBtn" type="button">SEE</button></p>
    <p><button id="hearBtn" type="button">HEAR</button></p>

    <!-- The Modal -->
    <div class="modal" id="seeModal">
        <div class="modal-content">
            <span class="close" id="seeClose">&times;</span>
            <p>See their profile</p>
            <p>Additional content...</p>
        </div>
    </div>

    <div class="modal" id="hearModal">
        <div class="modal-content">
            <span class="close" id="hearClose">&times;</span>
            <p>Hear their Stories</p>
            <p>Additional content...</p>
        </div>
    </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search