在一个页面上,我有一个只有<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是第一个。
答案 0 :(得分:0)
不确定这是否正是您所需要的,但这是我在打开多个模态时使用的CSS模式。
body .modalBlockout ~ .modalBlockout {
opacity: 0 !important;
}
这将隐藏任何额外的阻挡元素,并仅显示第一个。