I've referenced some other questions on here about showing and hiding a Bootstrap Alert on button click, but for some reason my implementation is not working. I am using Bootstrap 4, however, although from my beginner knowledge things should still work correctly.
I've referenced Bootstrap's documentation on dismissing alerts, and I have modified their sample to remove the show
class from the alert as I simply want to show the alert upon a button click. The dismissal should work fine as the close button on the alert will be implemented from the HTML.
HTML
<!-- Alert -->
<div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert">
<strong>Success!</strong> You just showed an alert.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Submit Button -->
<div class="form-group">
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#ModalCenter" id="modalButton">Click me</a>
</div>
</div>
JavaScript
$(document).ready(function() {
$("#modalButton").click(function(){
// alert("Success!") //Test to see if the function worked, it did
$("#buttonAlert").show() //Shows Bootstrap alert
})
})
So the JavaScript function works as I've tested it with alert("Success!")
, but the Bootstrap alert line $("#buttonAlert").show()
does not show anything?
Note I am brand new to Bootstrap and Javascript/Jquery, I'm just trying to put some sample code together to learn so please bear with me.
You don't have anything called "buttonAlert". Give the alert an id="buttonAlert"
<div class="alert alert-success alert-dismissible fade" role="alert" id="buttonAlert">
<strong>Success!</strong> You just showed an alert.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
Also, jQuery show()
won't work. You need to user addClass('show')
...
$("#modalButton").click(function(){
$("#buttonAlert").addClass('show')
})