Question 45680 in CSS Question posted in
Some basic documentation can be found here.

Multiple modals on one page only showing 1 modal – CSS

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 class="main">
    <div class="container">
      <div class="socials-3">
        <a class="fa fa-envelope-o" id="email" href="#Email"></a>
        <div id="email-modal" class="email-modal">
          <div class="socials-modal-content">
            <span class="close email-close">&times;</span>
            <p>fun<span class="middle-colour">@</span>wbf<span class="middle-colour">.</span>com</p>
          </div>
          <script src="js/emailmodal.js"></script>
        </div>
        <a class="fa fa-phone" id="phone" href="#Phone"></a>
        <div id="phone-modal" class="phone-modal">
          <div class="socials-modal-content">
            <span class="close phone-close">&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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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 class="socials-modal-content-email">
<div class="socials-modal-content-phone">

    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 class="main">
    <div class="container">
        <div class="socials-3">
            <a class="fa fa-envelope-o"  onclick="show_email()" id="email" href="#Email"></a>
              <div id="email-modal" class="email-modal">
                <div class="socials-modal-content-email">
                    <span class="close email-close" onclick="close_eamil()">&times;</span>
                    <p>fun<span class="middle-colour">@</span>wbf<span class="middle-colour">.</span>com</p>
                </div>
            </div>
            <a class="fa fa-phone" id="phone" onclick="show_phone()" href="#Phone"></a>
              <div id="phone-modal"  class="phone-modal">
                <div class="socials-modal-content-phone">
                    <span class="close phone-close" 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search