I use standard jQuery modal window

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); } }); });

How to prevent this window from closing if the click is made outside .modal-body , that is, so that the window closes only when you click on the cross?

  • I'm probably upsetting you, but there is no standard modal window in the jQuery library. - Duck Learns to Take Cover
  • What code is in question? You remove the last mouseup handler in it - and nothing will close - Grundy

2 answers 2

Read the documentation Property backdrop ( data-backdrop ):

If you choose the value of "static"

What is translated into Russian means

If you specify a static value, it will be impossible to close the modal window when you click outside its area.

  • one
    However, you are a telepath ... - Pavel Mayorov
  • I hung all the code, how to do it right, just tried something that still closes. - Alexander Sizintsev
  • How does bootstrap modal relate to the code in question? - Grundy
  • all solved the problem thanks. - Alexander Sizintsev

The easiest option is to set the style for the pointer-events: none; substrate pointer-events: none;