Multiple modals on one page only showing 1 modal-CodePudding

This may be a duplicate, but I can't figure this out. I can't figure out why the same modal is showing for both buttons. I've tried making separate classes for each modal but that didn't work.

// emailmodal.js
var emailModal = document.getElementById("email-modal");
var emailBtn = document.getElementById("email");
var emailSpan = document.getElementsByClassName("email-close")[0];

emailBtn.onclick = function() {
  emailModal.style.display = "block";
}

emailSpan.onclick = function() {
  emailModal.style.display = "none";
}

window.onclick = function(event) {
  if (event.taget == emailModal) {
    emailModal.style.display = "none";
  }
}

// phonemodal.js
var phoneModal = document.getElementById("phone-modal");
var phoneBtn = document.getElementById("phone");
var phoneSpan = document.getElementsByClassName("phone-close")[0];

phoneBtn.onclick = function() {
  phoneModal.style.display = "block";
}

phoneSpan.onclick = function() {
  phoneModal.style.display = "none";
}

window.onclick = function(event) {
  if (event.taget == phoneModal) {
    phoneModal.style.display = "none";
  }
}

.fa {
  padding: 80px;
  font-size: 50px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 10px 10px;
  border-radius: 10%;
  color: white;
  transition: 0.7s;
}

.fa-envelope-o {
  background: #199cad;
}

.fa-phone {
  background: #121e88;
}

.container {
  text-align: center;
  padding: 50px;
}

.middle-colour {
  color: #00ffff;
}

.email-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.phone-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.socials-modal-content {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 25%;
  color: white;
  font-size: 20px;
}

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

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

<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="styles/contact.css">
</head>

<body>
  <div >
    <div >
      <div >
        <a  id="email" href="#Email"></a>
        <div id="email-modal" >
          <div >
            <span >&times;</span>
            <p>fun<span >@</span>wbf<span >.</span>com</p>
          </div>
          <script src="js/emailmodal.js"></script>
        </div>
        <a  id="phone" href="#Phone"></a>
        <div id="phone-modal" >
          <div >
            <span >&times;</span>
            <p>01234567890</p>
          </div>
          <script src="js/phonemodal.js"></script>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

It's probably something simple but would be a big help if someone can find out the issue.

Edit: Changed code to snippet.

CodePudding user response：

Try giving your phone element variables their phone element equivalents. Right now they're all referring to email elements.

i.e. change this:

var phoneModal = document.getElementById("email-modal");
var phoneBtn = document.getElementById("email");
var phoneSpan = document.getElementsByClassName("email-close")[0];

to this:

var phoneModal = document.getElementById("phone-modal");
var phoneBtn = document.getElementById("phone");
var phoneSpan = document.getElementsByClassName("phone-close")[0];

Edit

You also have multiple typos: event.taget should be event.target, and you might want to use strict equality (===) instead of normal equality (==). Both equalities will work, however.

Here's a working example based on your code.

CodePudding user response：

You can change the style of socials-modal-content in your CSS file. For example, define two classes for email and phone like below code:

.socials-modal-content-email {
    background-color: rgb(100, 800, 0);
    background-color: rgba(0, 0, 0, 0.4);
    margin: 15% auto;
    padding: 20px;
    border: 10px solid #888;
    width: 25%;
    color: green;
    font-size: 30px;
}

.socials-modal-content-phone {
    background-color: rgb(1, 0, 0);
    background-color: rgba(1, 0, 0, 0.4);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 25%;
    color: white;
    font-size: 20px;
}

Then in your HTML file spread both of them like:

<div >
<div >

Overall, you can edit and combine your HTML and JS like:

<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles/contact.css">
</head>

<body>
<div >
    <div >
        <div >
            <a   onclick="show_email()" id="email" href="#Email"></a>
              <div id="email-modal" >
                <div >
                    <span  onclick="close_eamil()">&times;</span>
                    <p>fun<span >@</span>wbf<span >.</span>com</p>
                </div>
            </div>
            <a  id="phone" onclick="show_phone()" href="#Phone"></a>
              <div id="phone-modal"  >
                <div >
                    <span  onclick="close_phone()">&times;</span>
                    <p>01234567890</p>
                </div>
            </div>
        </div>
    </div>-
</div>
</body>

</html>
<script  type="text/javascript" >
    var emailModal = document.getElementById("email-modal");
    var phoneModal = document.getElementById("phone-modal");
    function show_email(){
        emailModal.style.display = "block";
    }
    function close_eamil(){
        emailModal.style.display = "none";
    }
    function show_phone(){
        phoneModal.style.display = "block";
    }
    function close_phone(){
        phoneModal.style.display = "none";
    }



</script>