Modal box with sliding animation in JavaScript and HTML

Question

I have created a simple modal dialog box as shown in the code below, which I will use to add help at certain points of a web form.

I would like to add a sliding animation effect that causes the dialog to slide into the screen when the modal is opening, and slide back out when the modal is closed:

I can't find a solution for what I want to achieve. My modal code currently looks like this:

function openModal(mod_name){
  var modal = document.getElementById(mod_name);
  modal.style.display = "block";
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
}
function closeModal(mod_name){
  var modal = document.getElementById(mod_name);
  modal.style.display = "none";
}

<style>
  body {font-family: Arial, Helvetica, sans-serif; background-color: red; }
  .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255,255,255,0.8); }
  .modal-content { margin: auto; padding: 20px; width: 80%; }
  .close { color: #323232; float: right; font-size: 28px; font-weight: bold; }
  .close:hover, .close:focus { color: #424242; text-decoration: none; cursor: pointer; }
</style>
<h2>Modal Example</h2>
<button id="oModal" onclick="openModal('myModal1')">Open Modal</button>

<div id="myModal1" class="modal modal_move">
  <div class="modal-content">
    <button id="cModal" class="close" onclick="closeModal('myModal1')">&times;</button>
    <p>Some text in the Modal...</p>
  </div>
</div>

Answer 1

One approach might be to use the CSS3 transition and transform rules to achieve the required slide in/out animation effect for your modal.

One approach would be to add CSS rules to modal to define default transition and transform behavior, along with an open modifier class that defines the transform of the modal when it's visible:

/* Updated CSS with open selector */
.modal.open {
  transform: translateX(0px);
}

.modal {
  /* Update CSS with transition and transform rules */
  transition: transform 1s linear;
  transform: translateX(-100%);
}

Next, you would replace the inline style changes of the display rule, with logic to toggle the open class on your modal element like so:

// Add open class to toggle "open" mode
modal.classList.add('open');

// Remove open class to "hide" modal
modal.classList.remove('open');

These two idea can be combined with you existing code as follows:

function openModal(mod_name) {
  var modal = document.getElementById(mod_name);

  // Add open class to make visible and trigger animation
  modal.classList.add('open');
}

function closeModal(mod_name) {
  var modal = document.getElementById(mod_name);
  // Remove open class to hide and trigger animation
  modal.classList.remove('open');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: red;
}


/* Updated CSS with open selector */

.modal.open {
  transform: translateX(0px);
}

.modal {
  /* Update CSS with transition and transform rules */
  transition: transform 1s linear;
  transform: translateX(-100%);
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.8);
}

.modal-content {
  margin: auto;
  padding: 20px;
  width: 80%;
}

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

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

<h2>Modal Example</h2>
<button id="oModal" onclick="openModal('myModal1')">Open Modal</button>

<div id="myModal1" class="modal modal_move">
  <div class="modal-content">
    <button id="cModal" class="close" onclick="closeModal('myModal1')">&times;</button>
    <p>Some text in the Modal...</p>
  </div>
</div>

Answer 2

You can use translate transform for this:

I changed your code like this: https://jsbin.com/qecajijuni/2/edit?html,js,output

 <style>
  body {font-family: Arial, Helvetica, sans-serif; background-color: red; }
  .modal { transition: 1s transform;transform:translate(500px); position:absolute; display: block; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(255,255,255,0.8); }
  .modal-content { margin: auto; padding: 20px; width: 80%; }
  .close { color: #323232; float: right; font-size: 28px; font-weight: bold; }
  .close:hover, .close:focus { color: #424242; text-decoration: none; cursor: pointer; }
</style>
<h2>Modal Example</h2>
<button id="oModal" onclick="openModal('myModal1')">Open Modal</button>

<div id="myModal1" class="modal modal_move">
  <div class="modal-content">
    <button id="cModal" class="close" onclick="closeModal('myModal1')">&times;</button>
    <p>Some text in the Modal...</p>
  </div>
</div>


function openModal(mod_name){
  var modal = document.getElementById(mod_name);
  modal.style.transform = "translate(0)";

  window.onclick = function(event) {
    if (event.target == modal) {
  modal.style.transform = "translate(500px)";
    }
  }
}
function closeModal(mod_name){
  var modal = document.getElementById(mod_name);
  modal.style.transform = "translate(500px)";
}