Как запретить закрытие окна при клике за его пределами?

442
29 января 2017, 15:32

Использую стандартное модальное окно 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, т.е чтобы окно закрывалось только при нажатии на крестик?

Answer 1

Читайте документацию Свойство backdrop (data-backdrop):

If you specify the value "static", it is not possible to close the modal when clicking outside of it

Что в переводе на русский обозначает,

Если вы укажите значение static, то будет невозможно закрыть модальное окно при клике вне его области.

Answer 2

самый простой вариант это задать стиль для подложки pointer-events: none;

READ ALSO
js. Зачем объявлять функцию через let / const / var? [требует правки]

js. Зачем объявлять функцию через let / const / var? [требует правки]

Здравствуйте, Я обычно пишу в такой последовательности:

458
Несколько recapcha на 1 странице

Несколько recapcha на 1 странице

Обнаружил что нельзя использовать несколько капч на одной страницеНо сам сайт стоит из 1 странице и на нем есть форма регистрации, форма восстановления...

475
jquery плагин для multiple select

jquery плагин для multiple select

Подскажите плагин для реализации такого select'a, или статьи, или натолкните на мысль, как реализовать

503
Как записать это “arr = []; ⏎ arr.push(smtn);” в одну строку?

Как записать это “arr = []; ⏎ arr.push(smtn);” в одну строку?

Есть такой небольшой кусочек кода:

356