web-dev-qa-db-fra.com

Bootstrap modal - ferme modal lorsque l'utilisateur clique sur le bouton "appel à l'action"

J'ai un lien externe dans mon modal, et je veux que le modal se cache après que l'utilisateur a cliqué sur le lien. Comment je fais ça?

Voici mon code:

<div class="modal hide fade" id="modalwindow">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Title</h3>
  </div>
  <div class="modal-body">
    <p>You need to search on google for that.</p>
  </div>
  <div class="modal-footer">
    <a id="closemodal" href="https://www.google.com" class="btn btn-primary" target="_blank">Launch google.com</a>
  </div>
</div>

<script type="text/javascript">
    $('#closemodal').modal('hide');
</script>
javascripttwitter-bootstrap
42
Tomas Jacobsen

Vous devez lier l'appel masqué modal à l'événement click:

$('#closemodal').click(function() {
    $('#modalwindow').modal('hide');
});

Assurez-vous également que l'événement click est lié une fois le chargement du document terminé:

$(function() {
   // Place the above code inside this block
});
89
jsalonen

Supprimez votre script et modifiez le code HTML: 

<a id="closemodal" href="https://www.google.com" class="btn btn-primary close" data-dismiss="modal" target="_blank">Launch google.com</a>

EDIT: Veuillez noter qu’à présent cela ne fonctionnera pas car cette fonctionnalité n’existe pas encore dans bootstrap. Voir le problème ici .

13
Praveen Kumar Purushothaman

Utilisation data-dismiss="modal". Dans la version de Bootstrap j'utilise v3.3.5, quand data-dismiss="modal" est ajouté au bouton souhaité, comme indiqué ci-dessous, il appelle ma fonction Javascript externe (JQuery) qui ferme magnifiquement le modal. C'est tellement doux, je craignais de devoir appeler une peau de modal dans une autre fonction et de chaîner celle-ci vers la vraie fonction

 <a href="#" id="btnReleaseAll" class="btn btn-primary btn-default btn-small margin-right pull-right" data-dismiss="modal">Yes</a>

Dans certains fichiers de script externes, et dans ma documentation prête, il existe bien sûr une fonction permettant de cliquer sur cet identifiant ID

 $("#divExamListHeader").on('click', '#btnReleaseAll', function () {
               // Do DatabaseMagic Here for a call a MVC ActionResult
4
ChristianProgrammer

Faire comme indiqué.

  $(document).ready(function(){
    $('#myModal').modal('show');

    $('#myBtn').on('click', function(){
      $('#myModal').modal('show');
    });
    
  });
<br/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Activate Modal with JavaScript</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>

      </div>
      
    </div>
  </div>
  
</div>
0
Guilherme Rigotti