关闭一个后立即打开引导程序模式会导致第一个无法正确关闭

Question

I'm using modals from bootstrap 5.1, but I'm encountering some issues.

The intended behaviour I want is:

• User presses a button, and a "Confirm modal" appears.
• User presses "Confirm" on the modal, it gets closed and a function with an ajax get call is executed.
• Once the ajax get returns, the "Result modal" is opened with the result of the operation

But this happens only sometimes, since most of the times, being the ajax call really fast, it's like the first modal is not able to fully close itself, leaving the background dark (the background gets even darker once the second modal opens, and when I close it, it returns to the first shade of dark).

This is how my two modals are defined in the html:

<div class="modal fade" id="modal_confirm" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal_confirm_title" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_confirm_title">Confirm Operation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Some body
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button id="confirm_btn" type="submit" class="btn btn-primary" data-bs-dismiss="modal" onclick="someFunction()">Confirm</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_result" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal_result_title" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_result_title">Operation result</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Operation result
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

This is the javascript:

function operation()
{
    let modal = new bootstrap.Modal(confirmation_modal, {"keyboard": true});
    $("#confirm_btn").on("click", performOperation)
    modal.show();
}


function performOperation()
{
    let xhr = $.ajax({
        url: "SOME_URL",
        method: "GET",

        success: function (response)
        {

            if (response['errorCode'] !== undefined)
            {
                let modal = new bootstrap.Modal(result_modal, {"keyboard": true});
                $("#security_modal_result_title").text("Operation failed")
                modal.show();
            }
            else
            {
                let modal = new bootstrap.Modal(result_modal, {"keyboard": true});
                $("#security_modal_result_title").text("Operation succeeded")
                modal.show();
            }
        },

        error: function ()
        {
            showError();
        }
    });
}

What am I missing here?

Thanks in advance.

Answer 1

you never call function operation() , your confirm_btn dont have the event onclick because is never assigned.

<button id="confirm_btn" type="submit" class="btn btn-primary" data-bs-dismiss="modal" onclick="performOperation()">Confirm</button>