J'ai créé une boîte de dialogue modale simple, comme indiqué dans le code ci-dessous, que j'utiliserai pour ajouter de l'aide à certains points d'un formulaire Web.

J'aimerais ajouter un effet d'animation coulissante qui fait glisser la boîte de dialogue à l'écran lorsque le modal s'ouvre, et réapparaît lorsque le modal est fermé :

enter image description here

Je ne trouve pas de solution pour ce que je veux réaliser. Mon code modal ressemble actuellement à ceci :

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>
5
B.Gees 11 mars 2019 à 11:57

2 réponses

Meilleure réponse

Une approche pourrait consister à utiliser les règles CSS3 transition et transform pour obtenir l'effet d'animation de coulissement requis pour votre modal.

Une approche serait d'ajouter des règles CSS à modal pour définir le comportement de transition et de transformation par défaut, ainsi qu'une classe de modificateur open qui définit le transform du modal lorsqu'il est 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%);
}

Ensuite, vous remplaceriez les changements de style en ligne de la règle display, par une logique pour basculer la classe open sur votre élément modal comme ceci :

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

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

Ces deux idées peuvent être combinées avec votre code existant comme suit :

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>
4
Dacre Denny 11 mars 2019 à 09:09

Vous pouvez utiliser la transformation de traduction pour cela :

J'ai modifié ton code comme ceci : https://jsbin.com/qecajijuni/2 /edit?html,js,sortie

 <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)";
}
1
Malith 11 mars 2019 à 09:12