平时我们在VS中也常常会用到模态框，今天我们就来聊聊模态框，但是我要说的是新增模态框，而不是修改模态框喔。在书写模态框代码时，我们还要引用一个插件: 然后就可以进行对代码进行书写了。
我们先说说模态框插件的用法，大家应该都知道模态插件通过数据属性或JavaScript按需切换您隐藏的内容。它将.modal-open加到了上，以覆盖默认的滚动行为，并生成.modal-backdrop来提供 点击区域，以便在动态模态窗外面点击一下就能移除模态。
还有就是启动一个动态视窗而无出编写JavaScript，在控制元素上设置data-toggle=“modal”（如按钮），以及一个data-target="#foo"或href="#foo"来指定特定的动态视窗进行切换: Launch modal
那么我们就先来了解下模态框到底是什么东西呢?下面进行了解答:
1、 弹出模态框是用于HTML、CSS和JavaScript构建的，它们位于文档中其他表现元素之上，并从中删除滚动事件以便模态框自身的内容能得到滚动。
2、 点击模态框“backdrop”(灰背景区域)，将自动关闭动态模态框。
3、 Bootstrap一次只支持一个模态窗口，不支持嵌套模式，因为我们相信那样叠加会造成用户体检不佳。
4、 模态框使用position: fixed,在呈现上与其它元素相比有很大不同，请尽可能将弹出模态框的HTML放在顶级位置，以避免其它元素的干扰，尤其是当另一个固定元素中也定义了.modal事件时，你可能就会遇到问题。
5、 同样是受position: fixed属性影响，在移动端设备上使用模态框，有一些注意事项。有关详细信息，请自行百度了。
6、 根据HTML5的语义定义，autofocus HTML属性对Bootstrap模态框没有影响，要达到同样的效果，这是我们就需要使用一些JavaScript:
$(‘#myModal’).on(‘shown.bs.modal’, function () {
$(‘#myModal’).trigger(‘focus’)
})
对模态框就是进行这些讲解了，你有理解没有?要是没有的话我们继续看下面。
下面我们来看代码:

通过上面的代码，我们可以设置出一个模态框，我写的这个是居中的样式。其中还有浏览器中部上方显示以及中部滚动长内容显示等等。
下面我们来看代码运行得到的效果图:点击Launch demo modal即可出现


然后点击即可出现居中于浏览器中部显示的模态框:

讲到这里，相信大家都能理解，模态框大致是用来干嘛的吧（有什么用处）。
我们在写代码时如果只是想要弹出模态框而不需要淡入淡出的效果，只要在模态框元素中定义移除.fade即可。
又如果模态的高度在打开时发生了变化，则应调用KaTeX parse error: Expected 'EOF', got '#' at position 3: （’#̲myModal’）.data(…(’#myModal’).modal(’handleUpdate’)重新调整模态框的位置，乙方滚动条出现。
再如果模态框有两个可选大小，可以通过class定义.modal-dialog(分别是.bd-example-modal-lg和.bd-example-modal-sm)，这些尺寸会在某些中断点调整，以避免在较小的viewport窗口上出现水平滚动条。
如果您想给定事件，请看下表:

代码书写为:
$(’#myModal’).on(‘hidden.bs.modal’, function (e) {
// do something
})

好了新增模态框就讲到这里吧。希望各大网友们您们看过我写的后，都能读懂其意思了。