BootBox modal showing a really ugly close icon

Question

I've some problem with a bootbox confirm dialog, when it shows up it's as

I'm using this inside a metronic 8.1 template and invoking it as

  bootbox.confirm({
      size: "small",
      message: "Are you sure?",
      callback: function (result: boolean) {
        if (result) {


          _this.spinner.show();
          _this.dataOwnerService.deleteData(item.id).subscribe(() => {
            _this.notifyService.showSuccess("Item deleted successfully.", "Success");
            _this.refresh();
          },
            () => {
              _this.notifyService.showError(
                'Error while deleting item.',
                'Unable to delete.'
              )
            }, () => {
              _this.spinner.hide();
            })
        }

      }
    });

As far as I've read there's no way to customize the button, and even on the homepage of the library there's no style loaded, but it appears on the right and correctly rendered

What can I check? Thanks

Answer 1

Kinda of old question, but: you'll see that when using Bootbox with Bootstrap 5 - the v5 version of Bootbox doesn't generate a modal with the updated Bootstrap 5 classes and content.

Basically, what Bootstrap 5 wants:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

versus what we create:

<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="bootbox-close-button close" aria-hidden="true">×</button>
                <div class="bootbox-body">Hello world!</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary bootbox-accept">OK</button>
            </div>
        </div>
    </div>
</div>

I do have a work-in-progress update that addresses this, if you're okay with prerelease versions: https://github.com/makeusabrew/bootbox/tree/v6-wip

We (meaning I) have pushed out a v6 version of Bootbox that should work as intended with Bootstrap 6. Please note that while Bootstrap no longer requires jQuery, Bootbox still does.