使用*只是* Bootstrap模态 [英] Using *just* Bootstrap modal
问题描述
我从Bootstrap集成我的Modal与另一个不使用它的网站。
我看到bootstrap让你分离每个组件的Javascript。但是CSS呢？如果我链接到bootstrap.css整个网站将改变。我只想要足够的CSS为Modal工作。 （我试着去通过CSS文件，只是猜到我需要的，但它没有工作）。
I'm integrating my Modal from Bootstrap with another site that doesn't use it. I see that bootstrap lets you separate the Javascript for each component. But what about the CSS? If I link to bootstrap.css the whole site will change. I just want enough CSS for the Modal to work. (I tried going thru the CSS file and just guessing what I needed, but it didn't work).
推荐答案
更新为Bootstrap v3.2.5
感谢@Gruber从v3.2.5确认。
Thanks to @Gruber for confirmation as of v3.2.5.
链接仍然 此处 可自定义@Fisu所述的设置。
The link is still here, to customize the setup as mentioned by @Fisu.
您需要选择4个选项，而不仅仅是 modal 。首先单击切换所有以关闭所有内容，然后选择这4个选项; Common CSS 下的
You need to select 4 options though, not just modal as stated. Start by clicking Toggle All to turn everything off, then select these 4 options;
-
按钮
-
关闭组件下的图标 -
组件动画（JavaScript组件
Buttonsunder Common CSSClose iconunder ComponentsComponent animations (for JS)under JavaScript componentsModalsunder JavaScript components
这将带来所有您需要的CSS。接下来是jQuery插件部分，再次通过选择切换所有关闭所有关闭然后只选择两个插件：
This should bring all of the CSS over that you'll need. Next is the jQuery plugins section, again start by selecting Toggle All to turn everything off and then just select two plugins:
- <$ c $在链接到组件下的 Magic （任何类型的动画都需要）
Modalsunder Linked to componentsTransitionsunder Magic (required for any kind of animations)
这是您需要的，js（ bootstrap.min.js ）和css（只需要 bootstrap.css ，你需要修改一下，下面解释）。转到该页面的底部，选择编译和下载来抓取您的包裹。
That's all you'll need, js (bootstrap.min.js) and css (only bootstrap.css which you'll need to modify a bit, explained below). Go to the bottom of that page and select compile and download to grab your package.
最后一点需要注意。正如@Rrrrrrrrrk提到的，我发现它仍然添加了很多规范化的css的开始，但可以安全地删除它（从html到img，保持css从.img响应）。我还添加了以下css以强制几种样式进入模态：
One final thing to note. As @Rrrrrrrrrk mentioned, "I found it still added a lot of normalization to the start of the css, but could safely delete it (from html to img, keeping the css from .img-responsive onwards)." This is still valid. I also added the following css to force a few styles into the 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;}
这只是确保字体类似于原来的模式样式， t采取你的页面样式（可能可以调整一点）。最后一个要注意的事项，您可以通过 http://cssminifier.com/ 运行它来缩小css。节省了几KB。
This just ensures fonts are similar to the original modal styling and don't take on your pages styles (could probably be tweaked a bit more). One final item to note, you could minify the css at this point by running it through http://cssminifier.com/. Saves a few KB.
实施模式：
我可能只是完成这个。我使用cookie插件，因为我想给我的用户一个选项来隐藏消息14天，这是在代码中设置。下面是您需要的代码块：
I might as well just finish this off. I'm using a cookie plugin because I want to give my users an option to hide the message for 14 days, which is set in the code. Here are the code blocks you'll need:
这应该在 < head> 的标签可能会在您的任何css之后，所以即使在结束 < / head>
This should go in the <head> of you document, probably after any of your css, so even just before the ending </head> tag will work.
<!-- 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> 。
This should go within your <body>. This will create the modal and the css you've included will hide it.
<!-- 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插件。
This code should go just before the ending </body> tag. It loads jQuery, bootstrap, and the cookie plugin I need.
<!-- 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，如果模态启动创建一个功能，点击不要再显示创建cookie禁用启动模态。
Finally, you'll want to add this script after the plugins above. This is a bit customized to my situation, I'm only launching the modal if there is no cookie set, and if the modal launches created a function to click Don't Show Again which creates the cookie to disable the launch of the modal.
<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>
希望这有助于！祝你好运。
Hope this helps! Good luck.
这篇关于使用*只是* Bootstrap模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
