I'm having trouble with my button's alert feature. When clicked, the alert should display and stay visible until it's closed.
However, on my website, the alert quickly flashes on the screen every time the button is pressed.
On my jsfiddle demo, the alert stays visible after being triggered but does not reappear when the button is clicked again.
Any suggestions or solutions would be greatly appreciated.
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">×</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>