Использую стандартное модальное окно jQuery
var $modal = $('#event-modal');
var modal_body = $(".modal-body");
var modal_content = $(".modal-content");
function mcloced (a) {
$modal.find('.modal-body').empty().end();
$modal.removeClass(a);
}
function addok (a) {
$modal.removeClass(a);
}
$('.give-transfer').on('click', function () {
var id_cabinet = $(this).data('id-cabinet');
var id_data = $(this).data('id-data');
var id_staff = $(this).data('id-staff');
var id_staff_old = $(this).data('id-staff-old');
var vid = $(this).data('vid');
var http_referer = $(this).data('http-referer');
/*
var id_staff_appoint = $('#id_staff_appoint').val(); */
$modal.modal('show');
//$modal.modal({backdrop: false});
addclassmodal = 'modal-transfer';
$modal.addClass(addclassmodal);
$modal.find('.modal-body').empty().end();
$(".load-modal").addClass('active');
document.getElementById('action').value = "transfer";
jQuery.ajax({
type: "post",
url: "/selects.php?vid=transfer&action=" + vid + "&id_cabinet="+ id_cabinet,
data: "id_staff=",
dataType: 'json',
success: function(data){
$(".load-modal").removeClass('active');
if(data.succes == 0){
jQuery('#msgbox_staff').html('' + data.msg + '');
setTimeout(function(){
$("#msgbox_staff").html('');
},10000);
}
if(data.succes == 1) {
$('.modal-title').html(''+ data.title_modal +'');
modal_body.append(''+ data.content_modal +'');
$('.js-transfer-lead').on('click', function () {
var email_transfer_checked = $("#email_transfer").is(':checked');
var sms_transfer = $("#sms_transfer").is(':checked');
var telegram_transfer = $("#telegram_transfer").is(':checked');
var info = $("#info").is(':checked');
var TransferParam = {
id_data: id_data,
id_staff_new: $('#id_staff_new').val(),
vid: $('#vid').val(),
email_transfer: email_transfer_checked,
id_staff_old: id_staff_old,
id_staff: id_staff,
id_cabinet: id_cabinet,
sms_transfer: sms_transfer,
telegram_transfer: telegram_transfer,
info: info
};
// отправляем данные на сервер
$.post('/update_status.php?vid=transfer', TransferParam,
function(data){
if(data.succes == 0){
$("#msgbox_transfer").html("" + data.msg + "");
setTimeout(function(){
$("#msgbox_transfer").html('');
},10000);
}
if(data.succes == 1){
$("#msgbox_transfer").html("" + data.msg + "");
setTimeout(function(){
$("#msgbox_transfer").html('');
location.href = http_referer;
},2000);
}
}, "json");
return false;
});
}
}
});
$('.close-modal').bind('click', function () {
mcloced (addclassmodal);
});
$(document).mouseup(function (e){ // событие клика по веб-документу
if (!modal_content.is(e.target) // если клик был не по нашему блоку
&& modal_content.has(e.target).length === 0) { // и не по его дочерним элементам
$modal.find('.modal-body').empty().end();
mcloced(addclassmodal);
}
});
});
Как этому окну запретить закрываться если клик сделан за пределами .modal-body, т.е чтобы окно закрывалось только при нажатии на крестик?
Читайте документацию
Свойство backdrop (data-backdrop):
If you specify the value "static", it is not possible to close the modal when clicking outside of it
Что в переводе на русский обозначает,
Если вы укажите значение static, то будет невозможно закрыть модальное окно при клике вне его области.
самый простой вариант это задать стиль для подложки pointer-events: none;
Продвижение своими сайтами как стратегия роста и независимости