twitter-bootstrap - 我可以在没有 Bootstrap 的情况下制作 Modal 吗？

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 类，有什么替代方案吗？

Answer 1

Is it possible to build a modal without Bootstrap classes?

一个modal是一个覆盖层，阻止用户与某些父内容交互。它不是Boostrap的专有。 ，尽管 Bootstrap makes it very easy通过添加 css 类来实现之一。在下面，Bootstrap 使用 JQuery实现其大部分功能，包括模式。

您可以使用任何其他库来实现它 for example Bulma ，通过使用另一个使用 jquery 的框架，for example jqueryui ，通过使用任何其他可以实现模式的 javascript 库，或者使用 javascript 实现它，甚至仅使用 css 和 html。

This是一个关于如何使用 javascript 和 css 创建模式的简单教程。

This是一个关于如何创建不使用 javascript、仅使用 html5 和 css 的模式的教程。

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

如果你不想(或不能)使用bootstrap，但可以使用jquery，可以关注this教程。