Within the structure of my webpage, there resides a table containing various elements. One specific cell within this table holds a link that triggers jQuery scripts upon being clicked. An example action initiated by clicking this link is displaying a Bootstrap Dialog box, which can conveniently be achieved using Bootbox.js. Nevertheless, it should be noted that Bootbox does not currently offer support for Bootstrap 4.
Initially, encountering an issue where the bootbox dialog failed to display due to differences in class names between Bootstrap 3 and Bootstrap 4 was resolved. In Bootstrap 3, the class identifier used for showing elements was in, whereas in Bootstrap 4, it has been replaced with show. This discrepancy has already been addressed, but here is a representation of how the setup appears at present:
https://i.sstatic.net/1VyW7.png
The HTML structure generated through invocation of bootbox.js in this scenario is as follows:
<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Test Title?</h4>
</div>
<div class="modal-body">
<div class="bootbox-body">Test Message</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
<button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
</div>
</div>
</div>
</div>
An obstacle present within the div section featuring the class name modal-header is the order in which the button precedes the h4 element. Simply flipping these positions would resolve the issue at hand, prompting the query on how this rearrangement could be accomplished through bootbox syntax. While temporarily omitting the title might provide a workaround until Bootbox integrates Bootstrap 4 compatibility, I am intrigued to explore potential solutions.
The current progress in addressing this dilemma is illustrated below:
bootbox.confirm({
className: "show", // manual addition of class name
title: "Test Title?",
message: "Test Message",
buttons: {
cancel: {
label: "<i class='fa fa-times'></i> Cancel"
},
confirm: {
label: "<i class='fa fa-check'></i> Confirm"
}
},
callback: function (result) {
// custom callback function
}
});