<p dir="auto">I'm using Bootstrap 2.0 and am trying to use a Modal for displaying a Markdown cheat sheet. I've set up a link to display the modal but when I click it, the modal appears briefly and then immediately disappears again.</p>
<p dir="auto">Here's my basic code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;a class=&quot;btn&quot; data-toggle=&quot;modal&quot; data-target=&quot;#markdown&quot;&gt;Show Markdown Cheatsheet&lt;/a&gt;

&lt;div id=&quot;markdown&quot; class=&quot;modal hide fade&quot;&gt;
    Foo
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;a class="btn" data-toggle="modal" data-target="#markdown"&gt;Show Markdown Cheatsheet&lt;/a&gt;

&lt;div id="markdown" class="modal hide fade"&gt;
    Foo
&lt;/div&gt;
</code></pre></div>
<p dir="auto">I've got the following JS files loaded:</p>
<ul dir="auto">
<li>jquery 1.7.1</li>
<li>bootstrap</li>
<li>bootstrap-alert</li>
<li>bootstrap-dropdown</li>
<li>bootstrap-tabs</li>
<li>bootstrap-modal</li>
<li>bootstrap-transition</li>
<li>jquery.dataTables.min</li>
</ul>
<p dir="auto">I have the following document-ready blocks:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$(document).ready(function(){
    $(&quot;.alert-message&quot;).alert();
    $(&quot;.dropdown-toggle&quot;).dropdown();

    $('#save').attr(&quot;disabled&quot;, &quot;disabled&quot;);
    $('#comment_message').show();

    $('#comment').keyup(function() {
             inspectCommentTextField();
    });

    $('#minor_revision').change(function() {
         inspectMinorRevisionCheckBox();
    });

   });

$(document).ready(function(){
    computersTable = $('#computers').dataTable({
            &quot;sScrollY&quot;: &quot;200px&quot;,
        &quot;bPaginate&quot;: false
    });

    applicationsTable = $('#applications').dataTable({
            &quot;sScrollY&quot;: &quot;200px&quot;,
        &quot;bPaginate&quot;: false
        });

       $('form').submit(function() {
        // Clear filters because filtered checkboxes don't get submitted for some reason
        computersTable.fnFilter('');
        applicationsTable.fnFilter('');
        });
});"><pre class="notranslate"><code class="notranslate">$(document).ready(function(){
    $(".alert-message").alert();
    $(".dropdown-toggle").dropdown();

    $('#save').attr("disabled", "disabled");
    $('#comment_message').show();

    $('#comment').keyup(function() {
             inspectCommentTextField();
    });

    $('#minor_revision').change(function() {
         inspectMinorRevisionCheckBox();
    });

   });

$(document).ready(function(){
    computersTable = $('#computers').dataTable({
            "sScrollY": "200px",
        "bPaginate": false
    });

    applicationsTable = $('#applications').dataTable({
            "sScrollY": "200px",
        "bPaginate": false
        });

       $('form').submit(function() {
        // Clear filters because filtered checkboxes don't get submitted for some reason
        computersTable.fnFilter('');
        applicationsTable.fnFilter('');
        });
});
</code></pre></div>
<p dir="auto">Code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;form class=&quot;form-horizontal&quot; role=&quot;form&quot;&gt;
  &lt;div class=&quot;form-group has-success has-feedback&quot;&gt;
    &lt;label class=&quot;control-label col-sm-3&quot; for=&quot;inputSuccess3&quot;&gt;Input with success&lt;/label&gt;
    &lt;div class=&quot;col-sm-9&quot;&gt;
      &lt;div class=&quot;input-group&quot;&gt;
        &lt;span class=&quot;input-group-addon&quot;&gt;@&lt;/span&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Username&quot;&gt;
      &lt;/div&gt;
      &lt;span class=&quot;glyphicon glyphicon-ok form-control-feedback&quot;&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;"><pre class="notranslate"><code class="notranslate">&lt;form class="form-horizontal" role="form"&gt;
  &lt;div class="form-group has-success has-feedback"&gt;
    &lt;label class="control-label col-sm-3" for="inputSuccess3"&gt;Input with success&lt;/label&gt;
    &lt;div class="col-sm-9"&gt;
      &lt;div class="input-group"&gt;
        &lt;span class="input-group-addon"&gt;@&lt;/span&gt;
        &lt;input type="text" class="form-control" placeholder="Username"&gt;
      &lt;/div&gt;
      &lt;span class="glyphicon glyphicon-ok form-control-feedback"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;
</code></pre></div>
<p dir="auto">Example: <a href="http://cssdeck.com/labs/xvebpw8t" rel="nofollow">http://cssdeck.com/labs/xvebpw8t</a></p>