Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does my remote modal not show .modal-header or footer?
    text
    copied!<p>Here is my modal code:</p> <pre><code>&lt;div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" &gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times&lt;/button&gt; &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;p&gt;One fine body…&lt;/p&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt; &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is the javascript that relates to the modal:</p> <pre><code>$('#myModal').on('hidden', function () { $(this).removeData('modal'); }); $("a[data-toggle=modal]").click(function (e) { lv_target = $(this).attr('data-target') lv_url = $(this).attr('href') $(lv_target).load(lv_url)}); </code></pre> <p>Here is my link code: <code>&lt;a href="http://localhost:3000/hints/found_sentences?word=创造" class="old_hint" data-remote="true" data-target="#myModal" data-toggle="modal"&gt;造&lt;/a&gt;</code></p> <p>When I click on the link it shows up with <em>all</em> of the divs replaced instead of just the <code>"modal-body"</code> div. In other words, <code>Modal header</code> doesn't appear above the remote content.</p> <p>Here is a <a href="http://jsfiddle.net/webmagnets/W3TLJ/" rel="nofollow">jsfiddle</a>. Disregard the content that loads. Just notice that the modal-header and modal-footer content doesn't show.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload