2
votes

Je ne peux pas régler l'heure lors de la création d'une 'boîte modale'

À propos du projet:

Il y a une table. Dans ce tableau, j'ai 3 colonnes appelées "nom", "nom de famille" et "plus".
Appuyez sur "Plus" pour activer la "boîte modale".
Dans la zone "Modal Box", il y a plus d'informations sur la personne.

La 'boîte modale' fonctionne lentement lors de son premier démarrage (500 ms). Ce n'est pas un problème. Mais lorsqu'il est pressé une seconde fois, il ne s'ouvre pas en fonction du temps (0ms). Pourquoi?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="backWall">
      <div id="modalBox">
          <p>Some text in the Modal..</p>
          <span class="close">&times;</span>
      </div>
    </div>
  <table class="table table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">First Name</th>
          <th scope="col">Last Name</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Furkan</td>
          <td>Gulsen</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Allen</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>Quenn</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
      </tbody>
    </table>

#backWall {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.25); }

#modalBox {
  display: none;
  background-color: #fff;
  z-index: 99;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px #262626;
  width: 60%;
  padding: 25px; }
  #modalBox .close {
    color: #aaaaaa;
    position: absolute;
    top: 5px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    transition: .25s; }
    #modalBox .close:hover, #modalBox .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      transform: scale(1.5);
      color: red; }

#more {
  font-size: 12px; }

let backWall = $("#backWall");
let modal = $("#modalBox");
$(".more").click(function(){
    backWall.show(0);
    modal.show(500);
  });
$(".close").click(function(){
  backWall.hide(0);
})
window.onclick = function(event) {
  if (event.target == document.getElementById("backWall")) {
    backWall.hide(0);
  }
};

javascript jquery html css

2 commentaires

Fonctionne pour moi à Chome. Pouvez-vous décrire le problème que vous voyez et le navigateur que vous utilisez?

«Modal Box» fonctionne. Ce n'est pas un problème. Mais lorsque nous appuyons deux fois sur la touche, cela ne fonctionne pas à 500 ms (ce problème). Cela fonctionne immédiatement. (Navigateur: Chrome)

3 Réponses :

0
votes

C'est parce que vous ne masquez jamais le modal. Le modal est un enfant du backwall. Une fois que vous affichez le modal pour la première fois, il est maintenant visible sur le mur arrière. Donc, basculer le backwall dicte maintenant si le modal s'affiche. Pour obtenir le comportement que je pense que vous recherchez, masquez simplement le modal lorsque vous masquez le backwall.

0 commentaires

0
votes

Le modal apparaît directement, car vous n'utilisez pas la fonction hide appropriée sur le modal. Voici le code fixe:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="backWall">
      <div id="modalBox">
          <p>Some text in the Modal..</p>
          <span class="close">&times;</span>
      </div>
    </div>
  <table class="table table-striped">
      <thead class="thead-dark">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">First Name</th>
          <th scope="col">Last Name</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Furkan</td>
          <td>Gulsen</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Allen</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>Quenn</td>
          <td>
            <button id="more" class="btn btn-dark more">MORE</button>
          </td>
        </tr>
      </tbody>
    </table>

#backWall {
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0, 0, 0, 0.25); }

#modalBox {
  display: none;
  background-color: #fff;
  z-index: 99;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px #262626;
  width: 60%;
  padding: 25px; }
  #modalBox .close {
    color: #aaaaaa;
    position: absolute;
    top: 5px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    transition: .25s; }
    #modalBox .close:hover, #modalBox .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      transform: scale(1.5);
      color: red; }

#more {
  font-size: 12px; }

let backWall = $("#backWall");
let modal = $("#modalBox");
$(".more").click(function(){
    backWall.show(0);
    modal.show(500);
  });
$(".close").click(function(){
  backWall.hide(0);
  modal.hide(0);
})
window.onclick = function(event) {
  if (event.target == document.getElementById("backWall")) {
    backWall.hide(0);
    modal.hide(0);
  }
};

0 commentaires

0
votes

Dans votre code HTML, modalBox se trouve à l'intérieur de backWall .

Au premier clic, vous les affichez tous les deux.
Lorsque vous cliquez sur le bouton de fermeture ou sur le backwall, vous définissez display: none sur le backwall (et, puisque votre modal est à l'intérieur, il est également masqué).
/ p>
Maintenant, lorsque vous faites un deuxième clic sur 'Plus', cette instruction backWall.show (0); affichera le backwall ET son contenu (y compris le modal). p>

Une solution rapide consiste à masquer les deux:

let backWall = $("#backWall");
let modal = $("#modalBox");

$(".more").click(function(){
    backWall.show(0);
    modal.show(500);
  });
$(".close").click(function(){
  backWall.hide(0);
  modal.hide(0);
})
window.onclick = function(event) {
  if (event.target == document.getElementById("backWall")) {
    backWall.hide(0);
    modal.hide(0);
  }
};

https://jsbin.com/vubizelonu/edit?html,css,js,output

0 commentaires