Alertify和bootstrap 4模式之间的tabindex冲突

Question

在运行Bootstrap 4 Modal时，我调用了一个Alertify确认对话框，问题是选项卡焦点在第一个中不起作用，而在最后一个中却出现了问题。

我相信这与"tabindex=-1“有关，它是基于Bootstrap 4标准添加到模式类Div中的，所以我尝试了不止一个概念来解决这个问题，但仍然不起作用……

我认为可行的概念之一是在Alertify onshow和onclose事件期间从"modal“类div元素切换"tabindex=-1”，但仍然不起作用！

    let mymessage = "Update entry?";   
    alertify.confirm().set({title: "Confirm!"})
        .set({labels: {ok:"Yes", cancel:"No"}})
        .set("defaultFocus", "ok");
        .set({onshow:function(){$(".modal").attr("tabindex","-2");}})
        .set({onclose:function(){$(".modal").attr("tabindex","-1");}}); 
    // Show confirmation message
    alertify.confirm(mymessage, function(e){
            if(e){
                editRow();
            } else {
                alertify.notify("Entry update has been canceled!");
            }
        }).bringToFront(); 

查看选项卡序列仍然在Modal Div中，而它在Alertify确认对话框中丢失！

​

​

我将非常感谢您的支持！

Answer 1

下面的代码解决了这个问题：

    let mymessage = "Update entry?";   
    // custom OK and Cancel label to Yes and No
    alertify.confirm().set({title: "Confirm!"})
        .set({labels: {ok:"Yes", cancel:"No"}})
        .set("defaultFocus", "ok")
        .set({onshow:function(){$(".modal").removeAttr("tabindex");}})
        .set({onclose:function(){$(".modal").attr("tabindex","-1");                            
        }}); 
    // Show confirmation message
    alertify.confirm(mymessage, function(e){
            if(e){
                editRow();
            } else {
                alertify.notify("Editing entry has been canceled!");
            }
        });