时间戳

首页 > 解决方案 > Alertify 和 bootstrap 4 模式之间的 tabindex 冲突

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

问题描述

我在运行 Bootstrap 4 模态时调用了 Alertify Confirmation 对话框，问题是选项卡焦点在第一个不工作，而在最后一个。

我相信这与基于 Bootstrap 4 标准添加到模态类 Div 中的“tabindex = -1”有关，所以我尝试了多个概念来解决问题，但仍然无法正常工作......

我认为可行的概念之一是在 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();

看看标签序列仍然在模态 Div 中，而它在 Alertify Confirmation 对话框中丢失！

看看标签序列仍然在模态 Div 中，而它在 Alertify Confirmation 对话框中丢失！

我将不胜感激任何支持！

标签： javascripthtmljquerybootstrap-4alertify

解决方案

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

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

推荐阅读