如何解决Alertify 和 bootstrap 4 模态之间的 tabindex 冲突
我在运行 Bootstrap 4 Modal 时调用了 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();
看看标签序列仍然在 Modal Div 中,而它在 Alertify Confirmation 对话框中丢失了!
我将不胜感激!
解决方法
以下代码解决了这个问题:
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!");
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。