If I have an alert in my JavaScript code in the HTML header, such as:
<head>
...
<script>
...
if (errors) {
alert('The following error(s) occurred:\n' + errors);
}
...
</script>
</head>
is there a way I can use a modal window from Bootstrap instead of the browser's native alert window?
If so, can someone show me a simple example for the one line of code I have above? The modal should just have an "OK" button (nothing fancy).
If I have an alert in my JavaScript code in the HTML header, such as:
<head>
...
<script>
...
if (errors) {
alert('The following error(s) occurred:\n' + errors);
}
...
</script>
</head>
is there a way I can use a modal window from Bootstrap instead of the browser's native alert window?
If so, can someone show me a simple example for the one line of code I have above? The modal should just have an "OK" button (nothing fancy).
Share Improve this question edited Oct 21, 2019 at 14:45 informatik01 16.4k11 gold badges78 silver badges108 bronze badges asked Apr 30, 2014 at 3:28 ggkmathggkmath 4,24624 gold badges76 silver badges133 bronze badges 5- see:: getbootstrap./javascript/#modals – Sudhir Bastakoti Commented Apr 30, 2014 at 3:30
- I saw that reference, but... I'm not sure how to integrate the javascript here. – ggkmath Commented Apr 30, 2014 at 3:30
- read the doc properly, there's javascript as well not just HTML – Sudhir Bastakoti Commented Apr 30, 2014 at 3:31
- Similar to this question (but no answers there either): stackoverflow./questions/20318285/… – ggkmath Commented Apr 30, 2014 at 3:38
- 1 Here's a working exammple: bootply./134106 – Carol Skelly Commented Apr 30, 2014 at 13:23
2 Answers
Reset to default 4Ues Bootbox.js It is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.
Here’s the simplest possible example:
bootbox.alert("Hello world!", function() {
Example.show("Hello world callback");
});
More details at Bootbox.js
First, add the html for the modal with an id
<div id="alertModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Errors Found!</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">
Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Second, modify your javascript to set the content of the modal body and show it
<script>
...
if (errors) {
var message = 'The following error(s) occurred:\n' + errors;
$('#alertModal').find('.modal-body p').text(message);
$('#alertModal').modal('show')
}
...
</script>