<!-- 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 -->
<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>
4条答案
按热度按时间bxfogqkk1#
自 Bootstrap v3.2.5起更新
感谢@Gruber确认v3.2.5。
链接仍然是**here**，以定制@Fisu提到的设置。
你需要选择4个选项，而不仅仅是
modal，首先点击切换所有关闭一切，然后选择这4个选项;Buttons在通用CSS下Close icon位于组件下Component animations (for JS)，位于JavaScript组件下*JavaScript组件下的
Modals接下来是jQuery插件部分，再次从选择Toggle All关闭所有内容开始，然后只选择两个插件：
Modals在下链接到组件Transitions，位于Magic下（任何类型的动画都需要）这就是你所需要的，js（
bootstrap.min.js）和css（只有bootstrap.css你需要修改一点，下面会解释），转到页面底部，选择编译和下载来获取你的包。最后一点需要注意。正如@ Rrrrrrrrk提到的，*“我发现它仍然在css的开头添加了很多规范化，但是可以安全地删除它（从html到img，保持css从.img-responsive开始）。"***这仍然有效。**我还添加了以下css以强制一些样式进入Modal：
这只是确保字体与原始模态样式相似，而不会影响页面样式（可能会做更多调整）。最后一点要注意的是，此时可以通过http://cssminifier.com/运行css来缩小css。节省几KB。
实施模态：
我最好还是把这个完成了。我使用cookie插件是因为我想给予我的用户一个选项来隐藏消息14天，这是在代码中设置的。下面是你需要的代码块：
这应该放在文档的**
<head>中，可能在任何css之后，所以即使在结尾之前，</head>**标记也可以工作。这应该在你的**
<body>**中，这将创建模态，你包含的css将隐藏它。这段代码应该在结束标记**
</body>**之前，它加载jQuery、bootstrap和我需要的cookie插件。最后，你会想在上面的插件之后添加这个脚本。这是根据我的情况定制的，我只在没有cookie设置的情况下启动模态，如果模态启动创建了一个函数来单击“不要再次显示”，它会创建cookie来禁用模态的启动。
kupeojn62#
进入Bootstrap customize section，在组件部分只选择模态选项，下载文件，打开 bootstrap.css 文件，然后将整个内容复制到您自己的CSS文件中。
如果你试图弄清楚你需要哪些特定的部分，你可能会错过一些重要的东西，而且，模态css本身并不太大。
更新：链接现在是here。我发现它仍然在css的开头添加了很多规范化，但是可以安全地删除它（从html到img，保持css从.img-responsive开始）。
ukxgm1gy3#
下面使用bootstrap 3：
JSnippet DEMO and Source code
Source code in a github gist
包括CSS之后，JS的用法完全相同：
vhipe2zx4#
仅限我的CSS + js引导模式：