Alertify 和 bootstrap 4 模式之间的 tabindex 冲突
tabindex conflict between Alertify and bootstrap 4 modal
我在 运行 一个 Bootstrap 4 Modal 时调用 Alertify Confirmation 对话框,问题是选项卡焦点在第一个不起作用,而它卡在最后一个.
我认为这与基于 Bootstrap 4 标准添加到模态 class Div 中的“tabindex=-1”有关,所以我已经尝试了多个概念来尝试解决问题,但仍然无法正常工作...
我认为可行的概念之一是在 Alertify onshow 和 onclose 事件期间从“模态”class 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();
看看 Tab 序列仍然在模态 Div 中,但它在 Alertify 确认对话框中不见了!
如有任何支持,我将不胜感激!
以下代码解决了这个问题:
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!");
}
});
我在 运行 一个 Bootstrap 4 Modal 时调用 Alertify Confirmation 对话框,问题是选项卡焦点在第一个不起作用,而它卡在最后一个.
我认为这与基于 Bootstrap 4 标准添加到模态 class Div 中的“tabindex=-1”有关,所以我已经尝试了多个概念来尝试解决问题,但仍然无法正常工作...
我认为可行的概念之一是在 Alertify onshow 和 onclose 事件期间从“模态”class 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();
看看 Tab 序列仍然在模态 Div 中,但它在 Alertify 确认对话框中不见了!
如有任何支持,我将不胜感激!
以下代码解决了这个问题:
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!");
}
});