JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//bootboxjs.com/bootbox.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p class="alert alert-warning">Status: <span></span>
            </p> <a class="btn btn-success" href="#">Open modal</a>

        </div>
    </div>
</div>

JavaScript

var status = false;

$('.btn').on('click', function () {
    bootbox.dialog({
        title: "Woah this acts like an alert",
        message: "Cool info for you. You MUST click Ok.",
        buttons: {
            sucess: {
                label: "Ok",
                callback: function () {
                    status = true;
                }
            }
        },
        onEscape: function () {
            $('.bootbox.modal').modal('hide');
        }
    });
});

$(document).on("hidden.bs.modal", ".bootbox.modal", function (e) {
    callback();
});


function callback() {
    if (!status) {
        onClose();
    } else {
        onOK();
        status = false;
    }
}

function onClose() {
    $('p.alert span').removeClass().addClass('text-danger').text("Dismissed");
}

function onOK() {
    $('p.alert span').removeClass().addClass('text-success').text("Sucess");
}