我想禁用输入，这意味着用户无法在输入元素中输入某些内容。
我要做什么？
我有两个弹出窗口（一个显示信息，另一个带有输入元素，取消和提交按钮）。现在，这两个是从同一个div渲染的，该div的z索引高于应用程序中的所有其他元素。表示当这些对话框显示时，用户将无法单击其他任何元素。
现在的问题是我不希望用户将任何内容输入到我上面提到的对话中的输入元素中。
有没有办法我可以通过z-index做到这一点？我不想在输入中添加一些禁用的属性，因为它可能会破坏某处的代码。
下面是html代码，
#root {
position: fixed;
z-index: 25;
}
.input_dialog {
flex-grow: 1;
}
.info_dialog {
width: 300px;
}<div id="root">
<div class="info_dialog">some info</div>
<div class="input_dailog">
<form>
<div class="input_with_actions">
<input>
<div class="actions">
<button>cancel</button>
<button>submit</button>
</div>
</div>
</form>
</div>
</div>