web-dev-qa-db-fra.com

Afficher bootstrap boîte d'alerte sur le bouton, cliquez sur

Code suivant montrant directement la boîte d'alerte.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container">
        <h2>Dismissal Alert Messages</h2>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! message sent successfully.
        </div>

    </div>
</body>

Je souhaite afficher la boîte d'alerte lors du clic sur le bouton. Quelqu'un peut-il m'aider à le faire?

javascriptjqueryasp.net-mvctwitter-bootstraptwitter-bootstrap-3
10
Neo

Ce jsfiddle montre comment afficher une boîte d'alerte bootstrap au clic)

http://jsfiddle.net/g1rnnr8r/2/

Vous devez implémenter la méthode show() de jquery. Le code que vous devez utiliser est.

$(document).ready(function(){
    $('button').click(function(){
        $('.alert').show()
    }) 
});
6
Paul Fitzgerald

Essaye ça. Ce qui se fait ici, c'est:

  1. Ajout d'un bouton "Afficher le message d'alerte".
  2. Par défaut, le message d'alerte sera masqué.
  3. Lorsque vous cliquez sur "Afficher le message d'alerte", un message d'alerte s'affiche
$("#btnShow").click(function(){
  
  $(".alert").hide().show('medium');
});
.alert{
  display:none;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container">
      
        <h2>Dismissal Alert Messages</h2>
      
      <button id="btnShow">Show Alert message</button>
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            Success! message sent successfully.
        </div>

    </div>
</body>
4
Puneet

Si vous souhaitez créer une boîte de dialogue modale personnalisée, vous pouvez utiliser cette petite bibliothèque pour cela: http://bootboxjs.com/

<!-- bootbox code -->
    <script src="bootbox.min.js"></script>
    <script>
        $(document).on("click", ".alert", function(e) {
            bootbox.alert("Hello world!", function() {
                console.log("Alert Callback");
            });
        });
    </script>

Sinon, vous devez créer manuellement les déclencheurs modal et javascript.

3
Pekka

Vous pouvez vérifier celui-ci:

 <div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="alert alert-success alert-dismissible">
            <a  class="close" data-dismiss="modal" aria-label="close">&times;</a>
            <strong>Success!</strong> Indicates a successful or positive action.
          </div>
    </div>
  </div>
</div>
1
Nitin Pawar