我可以做一个不依赖Bootstrap的模态框吗？

Question

我被委托创建一个模态框，但被告知在此构建中将无法使用Bootstrap库。是否可能在没有Bootstrap类的情况下构建模态框？如果可以，是否有人能够指导我阅读一些相关文档？

目前我的进展如下：

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel"><i class="fa fa-envelope"></i> </h4>
            </div><!-- modal-header -->
            <div class="modal-body">
                <p>Select the options below to get the right coverage type for you.</p>
                <form class="form-inline" role="form">
                    <div>

                    </div>
                </form>
            </div><!-- modal-body -->
        </div><!-- modal-content -->
    </div><!-- modal-dialog -->
</div><!-- modal -->

我的下一步是把它放在那里：

<div class="form-group"></div>

但那是 Bootstrap 类，有没有替代方案？

- Daniel

Answer 1

有没有可能构建一个没有Bootstrap类的模态框？ 模态框是一种覆盖层，防止用户与某些父内容交互。它不是Boostrap的专利，虽然通过添加CSS类，Bootstrap 使其非常容易实现。在底层，Bootstrap使用JQuery实现大部分功能，包括模态框。

您可以使用任何其他库例如Bulma来实现它，使用另一个使用jquery的框架例如jqueryui，使用任何其他JavaScript库来实现模态框，或者使用JavaScript甚至仅使用CSS和HTML来实现它。 这个是一个使用JavaScript和CSS创建模态框的简单教程。 这个是一个仅使用html5和css创建模态框的教程。

如果您不希望代码依赖于任何第三方库（如jquery），则这些教程非常有用。

如果您不想（或无法）使用bootstrap，但可以使用jquery，您可以按照此教程进行操作。

- c-chavez

---

需要注意的是，上述两个自定义教程都不完整。它们缺少一些关键功能，例如按ESC键关闭、捕获焦点、键盘辅助功能（角色、ARIA属性）以及禁用文档滚动等。一个更强大的示例（虽然仍不完美）可以在这里找到：https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/dialog - phil

很不幸，建立一个合理的对话是一个相当复杂的过程。如果你能使用一个库，那通常是最好的选择。但请注意 HTML 对话框元素 - 浏览器支持正在改善。否则，准备花费大量时间来确保正确性。 - phil

Answer 2

有一个jQuery插件，看看这个链接：https://jqueryui.com/dialog

- Mateus Luiz