单击其中的元素时，模态背景不会隐藏

Question

On a page I have a modal with few <div class="message-container"> . If the user clicks on that element, the page sends AJAX request for new modal. But when I close a new modal, I still have the backdrop from the first modal. All modals return PHP. I have also tried closing the old modal before opening a new one but that still doesn't help.

Here is the JS code:

$(document).on('click', '.message-container', function () {
    var messageId = $(this).attr('data-message-id');
    $.ajax({
        method: "POST",
        data: {
            action: 'readMessage',
            messageId: messageId
        }
    }).done(function (ret) {
        var obj = jQuery.parseJSON(ret);
        if (obj.code == 1) {
            $('#messages').modal('hide');
            $('.modal-container').html('');

            $('.modal-container').html(obj.value);
            $('#read-message').modal('toggle');
        } else {

        }
    });
});

$(document).on('click', '.unreadedMessages', function () {
    $.ajax({
        method: "POST",
        data: {
            action: 'getMessages'
        }
    }).done(function (ret) {
        var obj = jQuery.parseJSON(ret);
        if (obj.code == 1) {
            $('.modal-container').html(obj.value);
            $('#messages').modal('show');
        } else {
            var content = '<div class="alert alert-danger" id="messages-alert" role="alert">' + obj.value + '</div>';
        }
    })
});

unreadedMessages is first.

Answer 1

Not sure if this is exactly what you need, but here is a CSS pattern that I used when I have multiple modals open.

body .modalBlockout ~ .modalBlockout {
    opacity: 0 !important;
}

This will hide any extra block out elements, and only shows the first one.