使用Bootstrap插件：模态窗口

href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic%7CRoboto+Slab:400,700" rel="stylesheet" type="text/css"> rel="stylesheet" href="http://hongki.at/static/assets/_raw_article_template/v7/css/editor.css"> rel="stylesheet" href="http://hongki.at/static/assets/_raw_article_template/v7/css/syntaxhighlighter.css">

使用Bootstrap插件：模态窗口

在上一篇文章中，我们介绍了Bootstrap中的一些UI组件 。 这次，在本文中，我们将探讨Bootstrap插件。

如前所述，Bootstrap附带了许多自定义的jQuery插件，它们可以无缝地协同工作。 因此，我们不必依赖可能会有脚本冲突的第三方插件。

在本文中，我们将探索以下最吸引我的插件： Modal Window 。

设定文件

在运行这些插件之前，请确保已将所有必需的文件包含在我们的文档中，如下所示：

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js" type="text/javascript"></script>	
<script src="js/bootstrap.js" type="text/javascript"></script>

由于它是一个jQuery插件，所以请不要忘记还包括jQuery库，否则它将无法正常工作。 如果一切都准备就绪，我们很好。

模态窗口

与使用可能被浏览器阻止的弹出窗口相比，使用Modal是更好的吸引用户注意力的方法。 让我们看下面的例子：

Bootstrap中的模式窗口被简单地定义为modal类。 我们可以在其中添加几个部分，例如内容和标题，每个部分都可以包含一个div并分别分配给这些类modal-body和modal-header 。

<div id="modal" class="modal">
	<div class="modal-header">
		<h2>Lorem Ipsum</h2>
	</div>	
	<div class="modal-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat sem ipsum, ut faucibus nulla. 
		Nullam mattis volutpat dolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque mollis, nibh 
		tortor semper elit, eget rutrum purus nulla id quam.</p>
	</div>
</div>

我们在这里还没有做任何花哨的事情。 因此，此标记将在浏览器中仅给出以下结果。

分配触发器

此外，假设我们希望该模式窗口仅以单击作为触发来显示，我们需要执行以下操作。 首先，我们在div添加hide类来隐藏模式窗口，如下所示：

<div id="modal" class="modal hide">
	<div class="modal-header">
		<h2>Lorem Ipsum</h2>
	</div>	
	<div class="modal-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		Donec placerat sem ipsum, ut faucibus nulla. Nullam mattis volutpat
		dolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque 
		mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p>
	</div>
</div>

然后，在网页上的任何位置，我们添加一个按钮链接。

<a href="#modal" role="button" class="btn" data-toggle="modal">Click Me</a>

注意按钮中的data-属性，它是HTML5规范中添加的新属性，在这种情况下，我们使用此属性来定位模态窗口。

最后，要激活模式，请放置此jQuery行。

$('#modal').modal();

返回浏览器并刷新。 您应该看到模式窗口现在已隐藏，并且我们在其中有按钮。 现在，当我们单击按钮时，模态窗口将立即弹出。

关闭按钮

但是有一个约束。 我们如何隐藏模式窗口？ 为此，我们需要在模式窗口标题内放置一个button元素：

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

在此按钮中，我们还添加了一个data-属性，该属性指向模式窗口。 就是这样，所有其他事情（例如类和函数）都已处理完毕，一旦我们单击此按钮，则窗口应该被隐藏。

渐隐效果

现在，让我们使模式窗口更加有趣。 在这种情况下，我们将添加淡入淡出效果。 为此，我们只需在div添加fade类，如下所示。

<div id="modal" class="modal hide fade">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h2>Lorem Ipsum</h2>
	</div>	
	<div class="modal-body">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		Donec placerat sem ipsum, ut faucibus nulla. Nullam mattis volutpat
		dolor, eu porta magna facilisis ut. In ultricies, purus sed pellentesque 
		mollis, nibh tortor semper elit, eget rutrum purus nulla id quam.</p>
	</div>
</div>

现在，模式窗口将立即向下滑动并淡入，而不是立即显示，然后在关闭窗口时相反，向上滑动并逐渐消失。 这些效果大部分是通过CSS3的新属性来完成的。

奖金提示

Bootstrap中的Modal窗口插件易于实现。 但是，除了Bootstrap框架之外，我们还可以将其用于其他方面吗？ 幸运的是，Bootstrap提供了仅下载Bootstrap必要部分的选项。 因此，如果您的非Bootstrap网站仅需要此插件，则可以执行以下操作：

在Bootstrap网站上，转到“ 自定义”页面。 在此页面中，取消选中所有选项，然后仅选择以下各项：

• 基本CSS下的按钮样式。
• JS组件下的模态。
• jQuery插件下的模态。

这样，我们的文件将不会因其他不必要的库代码而肿。

翻译自: https://www.hongkiat.com/blog/bootstrap-plugin-modal-window/