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

时间:2015-06-15 11:27:14

标签: javascript jquery twitter-bootstrap

在一个页面上,我有一个只有<div class="message-container">的模态。如果用户单击该元素,页面将发送新模式的AJAX请求。但是当我关闭一个新的模态时,我仍然有第一个模态的背景。 所有模态都返回PHP。我还尝试在打开一个新模态之前关闭旧模态,但这仍然无济于事。

这是JS代码:

$(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是第一个。

1 个答案:

答案 0 :(得分:0)

不确定这是否正是您所需要的,但这是我在打开多个模态时使用的CSS模式。

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

这将隐藏任何额外的阻挡元素,并仅显示第一个。