使用*只是* 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">&times;</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">&times;</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。