如何使用 bootstrap 4 模态作为 "block ui" - 阻止输入并显示 "wait a minute.." 标签的模态屏幕？

Question

如何使用 bootstrap 4 模态作为 "block ui" 功能：在 AJAX 调用时动态淡化屏幕（并在那一刻显示 "wait a minute..." 标签或沙漏）？

如果您在框架中有模式，这意味着您也可以使用它们来阻止 UI 功能。但是我在官方文档中找不到任何 API 或示例...

Answer 1

我是如何解决的：

这已添加到每个需要 "block UI" 的页面（实际上是根模板）

<div class="modal " id="blockAppliactionDialog" tabindex="-1" role="status" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="background-color: transparent; border-width:0;">
            <div class="container pt-4 px-5" style="color:white; font-size:large">
                <h3>Wait a moment..</h3>
            </div>
        </div>
    </div>
</div>

然后我通过 javascript:

启用它

this.$('#blockAppliactionDialog').modal({
            backdrop: 'static',
            keyboard: false
        });

如何使用 bootstrap 4 模态作为 "block ui" - 阻止输入并显示 "wait a minute.." 标签的模态屏幕？

How to use bootstrap 4 modals as "block ui" - modal screen that blocks input and show "wait a minute.." label?

javascript

modal-dialog

bootstrap-4

blockui