2016-05-01 13 views
1

Ich möchte, dass meine Schaltfläche eine Warnung anzeigt, nachdem sie geklickt hat, und dort bleiben, bis sie geschlossen ist.Wie kann ich verhindern, dass eine Bootstrap-Warnung automatisch verschwindet?

Auf meiner Webseite blinkt die Alarmmeldung bei jedem Drücken der Taste für einen Sekundenbruchteil auf dem Bildschirm.

Auf meinem Handy erscheint der Alarm, bis er geschlossen wird, aber nicht wieder erscheint, wenn die Taste erneut angeklickt wird.

http://jsfiddle.net/g1rnnr8r/108/

Irgendwelche Ideen?

html

<div class="form-group"> 
    <div class="col-lg-10 col-lg-offset-2"> 
    <button type="submit" class="btn btn-primary">Submit</button> 
    <div class="alert alert-dismissible alert-success"> 
     <button type="button" class="close" data-dismiss="alert">&times;</button> 
     <strong>Completed!</strong> Form successfully submitted... 
    </div> 
    </div> 
</div> 

css

<style> 
    .alert { 
     display: none; 
    } 
</style> 

js

<script> 
    $(document).ready(function() { 
     $('button').click(function() { 
      $('.alert').show() 
     }) 
    }); 
</script> 

Antwort

2

Versuchen Sie folgendes: See DEMO

Wenn Sie data-dismiss="alert" verwenden, vollständig entfernen sie die alert div. Also versuchst du es so.

<body> 
    <button type="submit" class="btn btn-primary">Submit</button> 
    <div class="alert alert-dismissible alert-success"> 
     <button type="button" class="close">&times;</button> 
     <strong>Completed!</strong> Form successfully submitted... 
    </div> 
</body> 

JS:

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

    $('button').click(function(){ 
     $(this).parents('div').hide(); 
    }); 
}); 

CSS:

.alert{ 
    display: none; 
} 
+0

Funktioniert gut auf jsfiddle aus irgendeinem Grund auf meinem Webformular es die Taste, um die Seite zu aktualisieren macht. – girthquake

+0

@rks, Wenn der Submit-Button die Seite aktualisiert, können Sie 'event.preventDefault() verwenden;' –

+0

Funktioniert immer noch nicht, wenn ich 'event.preventDefault();' verwende, wird die Seite überhaupt nicht geladen. Nicht sicher, warum es auf jsfiddle und nicht auf meiner Seite funktioniert, ich denke, es könnte ein Problem mit etwas auf meinem Webformular sein. – girthquake

Verwandte Themen