title: Can Bootstrap Modal be used without a Button? (jQuery Scroll Event)
body: <p>I'm trying to use the Bootstrap modal as a popup that triggers on a jQuery scroll event. The scroll event works like so:</p>
  
  <pre><code>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()) &lt; jQuery(window).height() + jQuery(window).scrollTop()) {
              jQuery('.Potato').show();
          }
      });
  });
  </code></pre>
  
  <p>The script grabs the div hides/shows ''potato'' once a user has scrolled passed the ''reports'' section.</p>
  
  <p>Another part of my script dynamically adds in the modal along with user generated content:</p>
  
  <pre><code>&lt;div class="question"&gt;
    &lt;div class="modal fade"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;
              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Close&lt;/span&gt;
            &lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Potato Counter&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;p&gt;' + e.data.title + '&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But when it actually all triggers on the site, it looks nothing like a bootstrap Modal:</p>
  
  <p><a href="http://i.stack.imgur.com/MnqKT.png" rel="nofollow">http://i.stack.imgur.com/MnqKT.png</a></p>
  
  <p>I figure I must be missing something obvious? My dev console shows no errors loading any resources, and I see the bootstrap css and js files. Am I missing some required call/element that isn't triggering due to the lack of a button? (From what I understand that's normally how these are used?)</p>