使用*只是* Bootstrap模态
我将Bootstrap的Modal与另一个不使用它的站点整合在一起。 我看到bootstrap可以让你为每个组件分开Javascript。 但是CSS呢？ 如果我链接到bootstrap.css整个网站将改变。 我只是想让Modal有足够的CSS来工作。 （我尝试通过CSS文件，只是猜测我需要什么，但它没有工作）。
更新为Bootstrap v3.2.5
感谢@Gruber从v3.2.5开始确认。
链接仍然在这里 ，以定制@Fisu提到的设置。
你需要select4个选项，不仅仅是modal 。 首先单击“全部切换”以closures所有内容，然后select这4个选项;
- 普通CSS下的
Buttons -
Close icon组件下的Close icon -
Component animations (for JS)在JavaScript组件下 - JavaScript组件下的
Modals
这应该带来你需要的所有CSS。 接下来是jQuery插件部分，再次select“全部切换”以closures所有内容，然后select两个插件：
- 链接到组件的模式
- 魔术下的
Transitions（任何animation都需要）
这就是所有你需要的，js（ bootstrap.min.js ）和css（只有bootstrap.css ，你需要修改一下，下面解释）。 转到该页面的底部，select编译和下载来获取你的软件包。
最后要注意的是 正如@Rrrrrrrrrk所说， “我发现它仍然在css的开头添加了很多标准化，但是可以安全地删除它（从html到img，从.img响应开始保持css）”。 这仍然有效。 我还添加了下面的CSS来强制一些样式到Modals中：
.modal { font-family:Arial,Helvetica,sans-serif!important} .modal p {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important; color:#000 !important; font-size:14px;}
这只是确保字体类似于原来的模式样式，并不采取您的网页样式（可能会稍微调整一下）。 最后要注意的是，你可以通过http://cssminifier.com/运行，来缩小这个css。; 保存几KB。
实施模式：
我不妨把它完成。 我正在使用一个cookie插件，因为我想给我的用户一个隐藏14天的消息的选项，这是在代码中设置的。 以下是您需要的代码块：
这应该在你的文档的<head>中，可能在你的任何一个css之后，所以即使在结束</head>标记之前也是可以的。
<!-- CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="modalsonly/css/bootstrap-3.2.0.min.css"> <!-- END CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
这应该在你的<body> 。 这将创build模式，您所包含的CSS将隐藏它。
<!-- HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP --> <div class="modal fade " id="important-msg" tabindex="-1" role="dialog" aria-labelledby="important-msg-label" aria-hidden="true"> <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="important-msg-label">Message Title!</h4> </div> <div class="modal-body"> <p>Message text</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="dont-show-again">Don't Show Again</button> </div> </div> </div> </div> <!-- END HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
这段代码应该在结束</body>标记之前。 它加载jQuery，bootstrap和我需要的cookie插件。
<!-- PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP --> <!-- Latest jQuery (1.11.1) --> <script src="modalsonly/js/jquery-1.11.1.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="modalsonly/js/bootstrap-3.2.0.min.js"></script> <!-- jQuery Cookie --> <script src="modalsonly/js/jquery.cookie-1.4.1.min.js"></script> <!-- END PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->
最后，你需要在上面的插件之后添加这个脚本。 这是根据我的情况定制的，如果没有设置cookie，我只启动模式，如果启动的模式创build了一个function，单击不显示再次创buildcookie来禁用启动模式。
<script> //Start the DOM ready $( document ).ready(function() { //CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP //Check to see if the cookie exists for the Don't show again option if (!$.cookie('focusmsg')) { //Launch the modal when you first visit the site $('#important-msg').modal('show'); } //Don't show again mouse click $("#dont-show-again").click( function() { //Create a cookie that lasts 14 days $.cookie('focusmsg', '1', { expires: 14 }); $('#important-msg').modal('hide'); }); //end the click function for don't show again //END CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP }); //End the DOM ready </script>
希望这可以帮助！ 祝你好运。
转至Bootstrap自定义部分，并select组件部分中的模式选项。 下载该文件，打开bootstrap.css文件并将整个内容复制到您自己的CSS文件中。
如果你试图弄清楚你需要哪些特定的部分，你可能会错过一些重要的东西，而且，模式的CSS本身并不是太大。
更新 ：链接现在在这里 。 我发现它仍然添加了很多标准化到CSS的开始，但可以安全地删除它（从HTML到IMG，保持从.IMG响应向前的CSS）。
在这里你使用bootstrap 3：
JSnippet的DEMO和源代码
GitHub中的源代码
包含CSS后，JS的用法完全一样：
<!-- Button HTML (to Trigger Modal) --> <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a> <!-- Modal HTML --> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Confirmation</h4> </div> <div class="modal-body"> <p>Do you want to save changes you made to document before closing?</p> <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
在这个git-hub项目中使用的CSS包含你需要的模态的CSS。
