twitter-bootstrap 我可以在没有 Bootstrap 的情况下制作 Modal 吗?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/43663587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I make a Modal without Bootstrap?
提问by Daniel
I have been tasked with creating a modal, but I was told that the Bootstrap library will not be available to me in this build. Is it possible to build a modal without Bootstrap classes? If so, can someone guide me to some documentation?
我的任务是创建一个模态,但我被告知在这个版本中我将无法使用 Bootstrap 库。是否可以在没有 Bootstrap 类的情况下构建模态?如果是这样,有人可以指导我查看一些文档吗?
This is what I have so far:
这是我到目前为止:
<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">×</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 -->
My next step was to put in there:
我的下一步是放在那里:
<div class="form-group"></div>
but that is a Bootstrap class, what is the alternative?
但那是一个 Bootstrap 类,有什么替代方法?
回答by c-chavez
Is it possible to build a modal without Bootstrap classes?
是否可以在没有 Bootstrap 类的情况下构建模态?
A modalis an overlay that prevents the user to interact with some parent content. It is not proprietary of Boostrap, although Bootstrap makes it very easyto implement one by adding css classes. Underneath, Bootstrap uses JQueryto implement most of its functionality, including the modals.
甲模态是一种覆盖,防止用户与某些亲内容交互。它不是Boostrap 的专有,尽管 Bootstrap通过添加 css 类使它很容易实现。在底层,Bootstrap 使用JQuery来实现其大部分功能,包括模态。
You can implement it by using any other library for example Bulma, by using another framework that uses jquery, for example jqueryui, by using any other javascript library that could implement a modal, or by implementing it using javascript, or even with only css and html.
您可以通过使用任何其他库(例如 Bulma )来实现它,通过使用另一个使用 jquery 的框架(例如 jqueryui ),通过使用任何其他可以实现模态的 javascript 库,或者通过使用 javascript 实现它,甚至只使用 css 和html。
Thisis a simple tutorial on how to create a modal using javascript and css.
这是一个关于如何使用 javascript 和 css 创建模态的简单教程。
Thisis a tutorial on how to create a modal without javascript, only html5 and css.
这是一个关于如何在没有 javascript、只有 html5 和 css 的情况下创建模态的教程。
These tutorials are very useful if you don't want your code to be dependant of any third-party library, like jquery.
如果您不希望您的代码依赖于任何第三方库,如 jquery,这些教程非常有用。
If you don't want to (or can't) use bootstrap, but you can use jquery, you can follow thistutorial.
如果您不想(或不能)使用 bootstrap,但可以使用 jquery,则可以按照本教程进行操作。
回答by Mateus Luiz
There's this Jquery plugin, take a look: https://jqueryui.com/dialog
有这个Jquery插件,看看:https: //jqueryui.com/dialog

