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

Css – Modal Onclick Visibility Not Working As Intended

My modal below isn’t working but I’m not experienced enough to figure why. I’m trying to hide my modal using visibility: hidden, then changing to visibility: visible onclick.

HTML

    <div class="modalSignin"></div>

     <div class="authBtns" onclick="modalLogin()">
          <a href="#" id="loginBtn">Login</a>
          <a href="#" id="regBtn">Register</a>
     </div>

CSS:

    .modalSignin {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: black;
        min-width: 40%;
        min-height: 400px;
        visibility: hidden;
    }

JAVASCRIPT:

   function modalLogin() {
        var modal = document.getElementsByClassName("modalSignin");
         modal.style.visibility = "visible";
    };

Please see above code snippets.

Tags:

2

Answers


  1. 0

    document.getElementsByClassName

    The above returns a collection (an array of results, note the plural on getElement(s)). So you can’t just set the visibility directly on it.

    Just by simply changing it to access the first index, it will work

    function modalLogin() {
    var modal = document.getElementsByClassName("modalSignin")[0];
    modal.style.visibility = "visible";
}

    But it would have been better if you used an ID instead, and access it by ID, which returns the same results.

    function modalLogin() {
  var modal = document.getElementById("sign_in_modal");
  modal.style.visibility = "visible";
}

    Full snippet below.

    function modalLogin() {
  var modal = document.getElementById("sign_in_modal");
  modal.style.visibility = "visible";
}
    .modalSignin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
  min-width: 40%;
  min-height: 400px;
  visibility: hidden;
}
    <div class="modalSignin" id="sign_in_modal"></div>

<div class="authBtns" onclick="modalLogin()">
  <a href="#" id="loginBtn">Login</a>
  <a href="#" id="regBtn">Register</a>
</div>
    Login or Signup to reply.
  2. 0

    getElementsByClassName returns a elements, like Array

    use querySelector instead of getElementsByClassName

    function modalLogin() {
    var modal = document.querySelector("modalSignin");
    modal.style.visibility = "visible";
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search