Bootstrap-Alarmbox auf Knopfdruck anzeigen

Der folgende Code zeigt direkt die Alarmbox.Bootstrap-Alarmbox auf Knopfdruck anzeigen

<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>

Ich möchte auf die Schaltfläche klicken Warnfeld zeigen kann jemand mir helfen, dies zu tun?

Quelle

2015-05-05 Neo

Diese jsfiddle zeigt, wie Sie ein Bootstrap-Benachrichtigungsfeld auf klicken

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

Sie benötigen jQuerys show() Methode zeigen zu implementieren. Der Code, den Sie verwenden müssen, ist.

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

Quelle

2015-05-05 10:47:29

, wenn ich es zum zweiten Mal verwendet es ist nicht funktioniert :(es funktioniert nur nach der Seite aktualisieren – Neo

ah ok, lassen Sie mich das @Neo beheben. Können Sie bestätigen, dass jedes Mal, wenn Sie auf die Schaltfläche klicken Sie eine neue Warnmeldung angezeigt werden –

ja, ich werde es verwenden und generieren Warnungen dynamisch. .on Erfolg und Misserfolg Ich werde eine Warnmeldung anzeigen. – Neo

Wenn Sie benutzerdefinierte modalen Dialogfeld erstellen möchten, dann können Sie diese kleine Bibliothek für sie verwenden: 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>

Andernfalls müssen Sie die modal erstellen und Javascript löst manuell.

Quelle

2015-05-05 10:43:12 Pekka

Brauch aber meine obigen Code verwenden, können Sie mir helfen, es zu ändern? – Neo

Versuchen Sie dies. Was hier getan wird ist:

Eine Schaltfläche "Zeige Warnmeldung" hinzugefügt.
Standardmäßig ist die Warnmeldung ausgeblendet.
Bei Klick auf "Show Warnmeldung" wird Warnmeldung

$("#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>

Quelle

2015-05-05 10:46:05 Puneet

wenn ich klickte Taste zweites Mal nicht funktioniert :(es erst nach Aktualisierung der Seite – Neo

@Neo funktioniert - jetzt versuchen, – Puneet

schön, ich mag diese Lösung @Puneet –

function showAlert(){ 
 
    if($("#myAlert").find("div#myAlert2").length==0){ 
 
    $("#myAlert").append("<div class='alert alert-success alert-dismissable' id='myAlert2'> <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button> Success! message sent successfully.</div>"); 
 
    } 
 
    $("#myAlert").css("display", ""); 
 
}

<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> 
 

 
<button value="showAlert" onclick="showAlert();"> Show Alert</button> 
 

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

 
    </div>

Herausgegeben

Ich habe einige IDs hinzugefügt gezeigt werden und etwas Code geschrieben. Versuchen Sie zu verstehen, Wenn Sie nicht fragen, fragen Sie mich. Okay Hoffe, das wird dir helfen, wenn nicht fragen Sie mich nach mehr.

Quelle

2015-05-05 10:46:20

wenn ich Taste zweiten geklickt Zeit es funktioniert nicht :(es funktioniert nur nach der Seite aktualisieren – Neo

Ich habe aktualisiert, überprüfen Sie es jetzt die Warnung wird kommen, das zweite Mal, das dritte Mal ... die ganze Zeit.Okay –

Bootstrap-Alarmbox auf Knopfdruck anzeigen

Antwort

Verwandte Themen