I'm using the w3schools modal for bringing up multiple modals on one page. However I can't seem to get the 50% width modals back sliding outside of the window. Instead they just vanish when I close outside the modal or close them. The outer modal div is to make sure you can also close the div by clicking outside. My code doesn't seem to check out. Is there any solution to fix this? Plus, is it better to use transition instead of animation? Thanks in advance. Codepen: https://codepen.io/anon/pen/xNVVBo

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

// All page modals
var modals = document.querySelectorAll('.modal');

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
  btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
  }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
  spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
    }
  }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target.classList.contains('modal')) {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
    }
  }
}
/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 91;
  /* Sit on top */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-animation-name: animate-close;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-close;
  animation-duration: 0.6s;
}


/* Modal Content */

.modal-content {
  border-left: 2px solid black;
  position: fixed;
  background-color: #fefefe;
  right: 0;
  margin: auto;
  padding: 0;
  bottom: 0;
  top: 0;
  width: 50%;
  -webkit-animation-name: animate-open;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-open;
  animation-duration: 0.6s;
}


/* Add Animation */

@-webkit-keyframes animate-open {
  from {
    right: -50%;
    opacity: 1
  }
  to {
    right: 0;
    opacity: 1
  }
}

@keyframes animate-open {
  from {
    right: -50%;
    opacity: 1
  }
  to {
    right: 0;
    opacity: 1
  }
}


/* Add Animation */

@-webkit-keyframes animate-close {
  from {
    right: 0;
    opacity: 1
  }
  to {
    right: -50%;
    opacity: 1
  }
}

@keyframes animate-close {
  from {
    right: 0;
    opacity: 1
  }
  to {
    right: -50%;
    opacity: 1
  }
}


/* The Close Button */

.close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  -webkit-animation-name: animate-close;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-close;
  animation-duration: 0.6s;
}
<!-- Trigger/Open The Modal -->
<a class="modal-button" href="#myModal1">Open Modal</a>

<!-- The Modal -->
<div id="myModal1" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>CONTENT 1</p>

  </div>

</div>

<!-- Trigger/Open The Modal -->
<a class="modal-button" href="#myModal2">Open Modal</a>

<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>CONTENT 2</p>
  </div>

</div>

1 Answers

0
mateusz On

However I can't seem to get the 50% width modals back sliding outside of the window. Instead they just vanish when I close outside the modal or close them.

This is because animating display property is impossible. In your case (sliding element outside) you can simply use opacity: 0 and right: -100%. If you want element to be partially on screen while it starts to show - just change right property and add negative z-index ex. z-index: -1 for not active element or class.

Plus, is it better to use transition instead of animation

Depending on case. Transitions are applied when a property changes (exactly as in your case, so you dont have to create animation for simple job that can be triggered automatically). Animations on the other hand have to be applied (Ususally inside css with animation-name: name or in js) in some way and run independently (after getting applied they just run and dont care). So in your case transitions are sufficient, but if you use animations - nothing wrong with that.

Moreover adding class that will contain all active styles would be better practice than adding it line by line using el.styles.styleName = value, instead you just simply remove class from element classlist. It will scale better and enable class chaining when you start adding more states for your elements.

Simplified example with basic funcionality: https://codepen.io/anon/pen/Mdybgo