web-dev-qa-db-fra.com

Comment afficher une alerte en Bootstrap Modal

$(window).load(function(){
  $('.alertbox').click(function(){
    alert('You Clicked on Click Here Button');
    });
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
  
<div>
  <a class="alertbox" href="#clicked"> Click Here</a>
</div>

Je souhaite que l'alerte soit affichée dans le bootstrap Modal.

javascriptjqueryhtmltwitter-bootstrap
11
Riot Zeast Captain

Créez le div d'erreur dans le corps modal. et définir l'erreur

$(document).ready(function(){
  $('#alertbox').click(function(){
    $("#error").html("You Clicked on Click here Button");
      $('#myModal').modal("show");
    });
  });
<!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.2.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>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="alertbox">Click here</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 id="error"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>
20
Yaseen Ahmad

Je n'ai probablement pas bien compris votre question, mais vous ne pouvez pas utiliser la fonction d'alerte pour afficher un message à l'intérieur d'un élément de page. Alert affiche une alerte système en dehors de la page dom.

Si vous voulez afficher un message dans un modal, vous devez inclure (ou injecter) le balisage modal dans votre page html, alors vous affichez/masquez simplement le modal via les fonctions bootstrap.

Vous avez un très bon exemple ici

1
Davide Melfi