Question

我在我的项目中使用bootstrap创建模态窗口。当我只创建一个窗口时，一切正常。如果我从头开始创建第二个窗口我有问题。

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

对于创建模态窗口我正在使用这样的功能：

{ inproc:// | ipc:// | tcp:// | pgm:// | epgm:// | vmci:// }

当我创建第一个窗体时，有一个类'modal-open'。创建下一个窗口后删除它。

为什么会这样？

我认为失去了滚动的焦点，因为身体没有这个类。

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

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

专注而不是损失。 Scrol仅在当前窗口中工作。但是第二个窗口后无法关闭第一个窗口。每次运行

$('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');
    }
}

从函数createModalWindow

调用

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

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

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

});

对于undestand：当hidden.bs.modal被触发时，我调用一个检查体hasClass'modal-open'而parentid不为null。如果body没有这个类并且存在父窗口

，脚本将向body添加类'modal-open'

（bootstrap 3）从第一个窗口打开第二个窗口时丢失焦点

1 个答案: