（引导程序 3）从第一个窗口打开第二个窗口时失去焦点答案

【问题标题】：(bootstrap 3)Lost focus when open second window from first（引导程序 3）从第一个窗口打开第二个窗口时失去焦点
【发布时间】：2018-08-14 11:47:42
【问题描述】：

我正在使用引导程序在我的项目中创建模式窗口。当我只创建一个窗口时，一切正常。如果我从第一个窗口创建第二个窗口，我会遇到问题。

当我尝试滚动它时，在第一个窗口中一切正常。窗口正在滚动。当我从中打开下一个窗口时 - 滚动不是当前窗口。在它后面滚动身体。示例https://jsfiddle.net/rz4p503n/5/

为了创建模态窗口，我正在使用这样的功能：

function createModalWindow(windowid, parentid, template){
    if (parentid.localeCompare('')!=0){
        $(('#' + parentid)).modal('hide');
    }
    $('#' + windowid).detach();
    $("body").append(template);
    $('#' + windowid).modal('show');
}

当我创建第一个窗口主体时，它具有类“modal-open”。它在创建下一个窗口后删除。

为什么会这样？

我认为因为 body 没有这个类而失去了滚动的焦点。

UPD：我尝试修改创建/关闭窗口功能，例如：

$('body').on('click','.close-and-exit', function () {
    console.log('try to close');
    var windowid =$(this).closest('.modal').attr('id');
    var parentid =$(this).closest('.modal').attr('data-parentid');
    console.log({windowid: windowid, parentid:parentid});
    $('#' + windowid).modal('hide');
    $(('#' + windowid)).on('hidden.bs.modal', function (e) {
        //$('#' + parentid).modal('show');
        console.log('window: ' + windowid + ' is closed');
        if (typeof parentid!=='undefined'){
            if(parentid.localeCompare('')!=0){
                console.log(' try to show parent window: ' + parentid);
                $('#' + parentid).modal('show');
            }
        }
    })

});
function createModalWindow(windowid, parentid, template){
    console.log('parentid: ' + parentid);
    console.log('windowid: ' + windowid);
    if (parentid.localeCompare('')!=0){
        $(('#' + parentid)).modal('hide');
        $(('#' + parentid)).on('hidden.bs.modal', function (e) {
            console.log('parent is hided. create new windowЖ');
            $('#' + windowid).detach();
            $("body").append(template);
            $('#' + windowid).modal('show');
        })
    }
    else{
        $('#' + windowid).detach();
        $("body").append(template);
        $('#' + windowid).modal('show');
    }
}

关注而不是损失。滚动仅在当前窗口中工作。但是在第二个窗口之后不能关闭第一个窗口。每次运行

$(('#' + parentid)).on('hidden.bs.modal', function (e) {...});

从函数 createModalWindow 调用

$('#' + windowid).detach();
$("body").append(template);
$('#' + windowid).modal('show');

我该如何解决？我也需要正确滚动和关闭窗口。

【问题讨论】：

标签： twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

我使用 hidden.bs.modal 解决了这个问题。对于创建功能：

function createModalWindow(windowid, parentid, template){
    if (parentid.localeCompare('')!=0){
        $(('#' + parentid)).modal('hide');
        $(('#' + parentid)).on('hidden.bs.modal', function (e) {
            console.log('parent is hided. try to set modal class for body');
            if (($('body').hasClass('modal-open')==false)&& (parentid.localeCompare('')!=0)){
                $('body').addClass('modal-open');
            }
        })
    }
    $('#' + windowid).detach();
    $("body").append(template);
    $('#' + windowid).modal('show');
}

关闭窗口：

$('body').on('click','.close-and-exit', function () {
    console.log('try to close');
    var windowid =$(this).closest('.modal').attr('id');
    var parentid =$(this).closest('.modal').attr('data-parentid');
    $('#' + windowid).modal('hide');
    $(('#' + windowid)).on('hidden.bs.modal', function (e) {
        console.log('window: ' + windowid + ' is closed');
        if (($('body').hasClass('modal-open')==false)&& (parentid.localeCompare('')!=0)){
            $('body').addClass('modal-open');
        }

    });
    if (typeof parentid!=='undefined'){
        if(parentid.localeCompare('')!=0){
            console.log(' try to show parent window: ' + parentid);
            $('#' + parentid).modal('show');
        }
    }

});

对于不理解：当 hidden.bs.modal 被触发时，我调用检查体 hasClass 'modal-open' 并且 parentid 不为空。如果 body 没有此类并显示父窗口，脚本将向 body 添加类 'modal-open'

【讨论】：