0
votes

Comment faire fonction FAUX in JQuery, si Bootstrap Modal est caché?

J'ai une forme modale de bootstrap 4 avec bouton de connexion, lorsque j'ouvre modal et appuyez sur Entrée, puis loginvelidation () code> Ça fonctionne bien mais quand je masque bootstrap modal cette fonction loginvelidation ( ) code> fonctionne. Mais je ne veux pas que cette fonction loginvelidation () code> quand modal est masquer.

Comment puis-je faire cela? P>

Ceci est mon code: - P> p>



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="loginModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
           <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
        </div>
        
      </div>
    </div>
  </div>

javascript jquery html bootstrap-4

1 commentaires

C'est probablement parce que vous avez des événements «KeyPress» écoutant le document. Essayez quelque chose comme $ ('# loginmodal'). Sur ('KeyPress', fonction (E) {}, vous n'aurez pas besoin de vérifier la visibilité de modal puis.

3 Réponses :

1
votes

Vous pouvez vérifier si le modal est visible avec JQuery comme celui-ci. Gardez à l'esprit que «ON.SHOWN.MODAL» est l'événement déclenché. Et ne vérifie pas l'état actuel du modal.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="loginModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
           <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
        </div>
        
      </div>
    </div>
  </div>

0 commentaires

1
votes

Vous ajoutez l'écouteur d'événement dans l'événement show.bs.modal code>. À l'intérieur de la vérification code> keyPress code> si le modal est visible code> & user === code> au lieu de double == code>

p>



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

<!-- The Modal -->
<div class="modal" id="loginModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
      </div>

    </div>
  </div>
</div>

0 commentaires

1
votes

Tout d'abord, vérifiez si le modal est caché ou visible, puis effectuez la validation

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <button type="button" class="btn btn-primary modalBtn" data-toggle="modal" data-target="#loginModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="loginModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
           <button class="btn btn-primary btn-lg" id="loginBtn" onclick="loginVelidation();">Login</button>
        </div>
        
      </div>
    </div>
  </div>

0 commentaires