我需要在HTML / JavaScript中实现某种模态。当模态打开时，页面仍应在后台可见，但不应使用键盘访问，也不应包含在屏幕阅读器输出中。换句话说，我希望它表现得好像不在那里，但仍然可见。
我还查看了提议的“对话框”规范，并找到了inert的定义，它完美地描述了我需要的内容：
当某个节点处于惰性状态时，用户代理必须表现为该节点不在用于定位用户交互事件的目的
我尝试了什么（我无法使用屏幕阅读器进行测试，因此我只测试了键盘访问权限）：
public ActionResult Index()
{
GlobalHost.ConnectionManager.GetHubContext<MessageHub>().Clients.All.send("Some msg");
return View();
}
和$(function () {
var messageHub = $.connection.messageHub;
$.connection.hub.start();
messageHub.client.send = function (content) {
alert(content);
$("#div1").text('abc');
alert('done');
}
。hidden和style="display: block"。正如您可能猜到的，这些都没有奏效。
是否有一些合理的方法可以使用现有技术使子树“惰性”？
答案 0 :(得分：3)
迄今为止，Firefox和Chromium不支持inert，而且2014年的版本为dropped from the WHATWG version。
用于识别 模式应该如何运作的资源是provided in the ARIA Authoring Practices 1.1。
有关详细信息，我建议Marco Zehe's advice on accessible modals。 Marco适用于Firefox。评论中还有一些非常有价值的提示和参考。
所有这些都要在这里粘贴一点。
答案 1 :(得分：0)
dialog元素适用于Chrome，Safari和Opera。在showModal()元素上调用dialog函数时，这可以满足您对其他元素的惰性需求。
<a href="#" onclick="document.getElementById('modal').showModal();">click here</a>
<dialog id="modal">
hello
</dialog>
最重要的是要了解您的网页指出：
本节未定义或创建任何名为“inert”的内容属性。本节仅定义了一个抽象的惰性概念。
最好的办法是使用showModal()函数，因为它可以在不同的浏览器上运行，希望它很快就会在Firefox和IE浏览器中实现。
答案 2 :(得分：-1)
我们通常会创建一个与页面大小相同但容量大于主页面的容器（例如return $timeout(process, 20) as any as ng.IPromise<IResult>）。这有效地隐藏了用户输入的主页面。然后，我们通过使z-index大于容器，在容器的“顶部”上进行模态对话。