Question

我正在将我的Modal从Bootstrap集成到另一个不使用它的站点。我看到bootstrap允许你为每个组件分离Javascript。但那CSS呢？如果我链接到bootstrap.css，整个网站将会改变。我只是想要足够的CSS来使Modal工作。（我尝试通过CSS文件，只是猜测我需要什么，但它不起作用。）

Answer 1

从Bootstrap v3.2.5开始更新

感谢@Gruber自v3.2.5起的确认。

该链接仍为 here ，以自定义@Fisu所述的设置。

您需要选择4个选项，而不仅仅是modal。首先单击Toggle All关闭所有内容，然后选择这4个选项;

公共CSS

Buttons 在组件
Close icon JavaScript组件
Component animations (for JS) JavaScript组件
Modals

这应该将所有CSS带到您需要的地方。接下来是jQuery插件部分，再次选择Toggle All来关闭所有内容，然后选择两个插件：

Modals位于链接到组件 下魔法下的
Transitions（任何动画都需要）

您需要的全部内容，js（bootstrap.min.js）和css（仅bootstrap.css，您需要修改一下，如下所述）。转到该页面的底部，然后选择编译和下载以获取您的包。

最后要注意的一件事。正如@Rrrrrrrrrk提到的那样，＆＃34;我发现它仍然为css的开头增加了很多规范化，但可以安全地删除它（从html到img，保持css从.img-responsive开始）。＆＃34; 这仍然有效。我还添加了以下css以强制将几种样式添加到模式中：

.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">&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，我只启动模态，如果模态启动创建了一个函数来点击Don再次显示创建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>

希望这有帮助！祝你好运。

Answer 2

转到Bootstrap customize section并选择组件部分中的模态选项。下载文件，打开 bootstrap.css 文件，将整个内容复制到您自己的CSS文件中。

如果你试图弄清楚你需要哪些特定部分，你可能会错过一些重要的东西，而且，模态css本身并不算太大。

<强>更新：该链接现在是here。我发现它仍然为css的开头添加了很多规范化，但可以安全地删除它（从html到img，保持css从.img-responsive开始）。

Answer 3

在这里你使用bootstrap 3：

JSnippet DEMO and Source code

Source code in a github gist

包含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>

Answer 4

仅适用于我的CSS + js Bootstrap模式：

  document.querySelector('.mymodalonline').onclick = function() {  document.querySelector('.modal').classList.toggle('open');}

  document.getElementById('closf').onclick = function() {  document.querySelector('.modal').classList.toggle('open');}

 .hidden {
    display: none;
}
  .open {
    display: block!important;
}
.modal-open {
  overflow: hidden;
}
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  background-color: #00000063;
  padding-top: 100px;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}
.modal-content {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000000;
}
.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  min-height: 16.42857143px;
}
.modal-header .close {
  margin-top: -2px;
}
.modal-title {
  margin: 0;
  line-height: 1.42857143;
}
.modal-body {
  position: relative;
  padding: 15px;
}
.modal-footer {
  padding: 15px;
  text-align: right;
  border-top: 1px solid #e5e5e5;
}
.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}
button.close {
  -webkit-appearance: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}
@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
[role="button"] {
  cursor: pointer;
}
.hide {
  display: none !important;
}
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.hidden {
  display: none !important;
}
.affix {
  position: fixed;
}

<a href="#myModal" data-toggle="modal" class="mymodalonline" onclick="return false;"><span>Обратный<br>звонок</span></a>

<!-- HTML-код модального окна -->
<div id="myModal" class="modal fade text-center">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Заголовок модального окна -->
      <div class="modal-header">
        <button type="button" id="closf" class="close" data-dismiss="modal" aria-hidden="true">x</button>
        <h4 class="modal-title">Заказать звонок</h4>
      </div>
      <!-- Основное содержимое модального окна -->
      <div class="modal-body">
      <div class="row">
     <div class="col-xs-2"></div>
      <div class="col-xs-8">
        111
      </div>
    <div class="col-xs-2"></div>
        </div></div>
    </div>
  </div>
</div>

使用* just * Bootstrap模态

4 个答案: