More than one modal box on page?

Question

Edit

I have updated all the code in this question.

Question

I have been trying to get more than one modal box to work a single page.

I can get one to work but I can't replicate it so that two will open (I want there to be three modal boxes to in the end?

This is the button that is being called to open the first modal;

    <button id="myHistoryBtn" class="myAboutBtn">more</button>

This is the second one;

<button id="myAboutBtn" class="myAboutBtn">more</button>

This is the modal structure that I am using

<div id="myHistoryModal" class="modal">

    <!-- Modal content -->
    <div class="modal-container">
            <div class="modal-content">
                <span class="modalclose">×</span>
                <h1>sstory</h1>
            </div>
    </div>
</div>

This is the second one

<div id="myAboutModal" class="modal2">

          <!-- Modal content -->
        <div class="modal-container">
              <div class="modal-content">
                <span class="Aboutclose" id="close">×</span>
                <h1>AAAAAstory</h1>
              </div>
        </div>
        </div>

Then this is the JavaScript that is making everything work.

         // Get the modal
var modal = document.getElementById('myHistoryModal');

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

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

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

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

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

Here is the JavaScript to get the other modal box to work.

// Get the modal
var about = document.getElementById('myAboutModal');

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

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

// When the user clicks the button, open the modal
Abtn.onclick = function(event) {
    about.style.display = "block";
        main.style.display = "none";
}

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

// When the user clicks anywhere outside of the modal, close it
window.onclick = function() {
    if (event.target == about) {
        about.style.display = "none";
                main.style.display = "flex";
    }
}   

I think I am going insane as it all starting to muddle now. Once I try to have more than one modal box it.

I gave it one more go and I sort have got it to work (sort of)

One of the modal box appears when I click the button but won't disappear on close (just stays there)

When I click the other modal box button it hides content but doesn't show the modal box?

Heres a link of what I am working on. I have taken out the code that makes the other modal boxes to work to show you what meant to happen when you click on the more button.

http://www.periodictablesearch.zackreid.com/pages/Carbon.html

This is just confusing me now. I have renamed everything on the second set of JavaScript that makes the second button to work but still nothing.

Edit

So I have now got them to appear and but one is still broken a bit.

http://www.periodictablesearch.zackreid.com/pages/Carbon.html

Then second modal box appears but it won't hide/ close done when using the button our clicking outside the modal box.

Edit

I have now gotten the second modal to close when clicking of the window. Just need to make the button work? Is anyone interested? Should I update my code?

Answer 1

You may need to change the name of second box to

var myAboutModal = document.getElementById('myAboutModal');
var myAboutBtn = document.getElementById("myAboutsBtn");

and register the onclick to myAboutBtn like:

myAboutBtn.onclick = function() {
  myAboutModal.style.display = "block";
  main.style.display = "none";
}

Otherwise it will end up mess with the first btn and modal variable

And same with the span variable. By the way, the span may need to use the id instead of the classname, because getElementsByClassName("close")[0]; is always the first span in the document, may never give you the second span you want for the second modal

For the close btn, you can add event listener to all close button without the need to add them one by one

var closeBtns = document.getElementsByClassName("modalclose");
for(var i=0; i< closeBtns.length; i++) {
   closeBtns[i].onclick = function() {
       modal.style.display = "none";
       about.style.display = "none";
   }
}

To close modal when click outside of it, you need to check if the target is not any of the modal, not the trigger modal buttons, not the modal-container , not the modal-content and not any content inside of modal-content

window.onclick = function(event) {
    if (event.target != modal && event.target != about && event.target != btn && event.target != Abtn && event.target.className != "modal-container" && event.target.className != "modal-content" && event.target.parentNode.className != "modal-content") {
        modal.style.display = "none";
        about.style.display = "none";
    }
}

I am not sure what you want to do with the main.style.display = "flex" . In most cases, there is no need to set any style regarding the main , assuming the main is the html <body>

A working jsfiddle is here https://jsfiddle.net/yg88rvgq/1/