自 Bootstrap v3.2.5 起更新
感谢@Gruber 对 v3.2.5 的确认。
链接仍然是here,用于自定义@Fisu 提到的设置。
您需要选择 4 个选项,而不仅仅是modal 所述。首先单击 Toggle All 以关闭所有功能,然后选择这 4 个选项;
-
Buttons 在 Common CSS 下
-
组件下的
Close icon
-
JavaScript 组件 下的
Component animations (for JS)
-
JavaScript 组件 下的
Modals
这应该会带来您需要的所有 CSS。接下来是 jQuery 插件部分,再次选择 Toggle All 以关闭所有功能,然后选择两个插件:
-
链接到组件下的
Modals
-
Magic 下的
Transitions(任何类型的动画都需要)
这就是您所需要的,js (bootstrap.min.js) 和 css(只有 bootstrap.css 需要稍作修改,如下所述)。转到该页面的底部并选择编译和下载以获取您的包。
最后要注意的一点。正如@Rrrrrrrrrk 提到的,“我发现它仍然在 css 的开头添加了很多规范化,但可以安全地删除它(从 html 到 img,保持 css 从 .img-responsive 开始)。” em> 这仍然有效。 我还添加了以下 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> 中。这将创建模态,并且您包含的 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,我只会启动模式,并且如果模式启动创建了一个单击“不再显示”的功能,它会创建 cookie 以禁用模式的启动。
<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>
希望这会有所帮助!祝你好运。