可以在没有按钮的情况下使用 Bootstrap Modal 吗？（jQuery 滚动事件）答案

【问题标题】：Can Bootstrap Modal be used without a Button? (jQuery Scroll Event)可以在没有按钮的情况下使用 Bootstrap Modal 吗？（jQuery 滚动事件）
【发布时间】：2014-11-19 11:51:20
【问题描述】：

我正在尝试将 Bootstrap 模式用作触发 jQuery 滚动事件的弹出窗口。滚动事件是这样工作的：

jQuery(document).ready(function() {
    jQuery('.Potato').css('top', jQuery('.Potato').closest('.post').height() + 'px');
    jQuery('#id-focus-comment').on('click', function(e) {
        jQuery('#comment').focus();
    });
    jQuery('.Potato').hide();
    jQuery(window).on('scroll', function(e) {
        if((jQuery('#reports').offset().top+jQuery('#reports').height()) < jQuery(window).height() + jQuery(window).scrollTop()) {
            jQuery('.Potato').show();
        }
    });
});

一旦用户滚动通过“报告”部分，脚本就会抓取 div 隐藏/显示“土豆”。

我的脚本的另一部分与用户生成的内容一起动态添加到模式中：

<div class="question">
  <div class="modal fade">
    <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">Potato Counter</h4>
        </div>
        <div class="modal-body">
          <p>' + e.data.title + '</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>
</div>

但当它实际上都在网站上触发时，它看起来一点也不像引导模式：

http://i.stack.imgur.com/MnqKT.png

我想我一定遗漏了一些明显的东西？我的开发控制台没有显示加载任何资源的错误，并且我看到了引导 css 和 js 文件。我是否缺少一些由于缺少按钮而未触发的必需调用/元素？（据我了解，这通常是如何使用的？）

【问题讨论】：

忘记modal类了，看htmlgetbootstrap.com/javascript/#modals的结构。此外，当触发模式时，主体类也更改为 modal-open
谢谢 - 在模态淡入淡出中添加。菜鸟失误！不过不太清楚你对第二部分的意思，将 body 类更改为 modal-open；我该怎么办？
body.modal-open 在触发模态时发生，如果您以其他方式触发它并且希望它具有深色背景及其行为方式，则必须在加载时添加该类并将其删除——如果它没有自动被删除。

标签： jquery css twitter-bootstrap bootstrap-modal

【解决方案1】：

是的，可以在没有按钮的情况下使用引导模式。

请在此处阅读文档：http://getbootstrap.com/javascript/#modals-usage

根据您当前的 HTML，您可以使用以下方式触发模式：

jQuery('.question .modal').modal('show');

【讨论】：