title: Bootstrap Modal - show does not remove hide attribute
body: <p>I am creating a Bootstrap 2.3.1 modal as follows:</p>
  
  <pre><code>myModal = $('&lt;div/&gt;', {
     'class': 'modal hide',
     'id': id + '-addModal',
     'tabindex': -1, // needed for escape to work...
     'role': 'dialog',
     'data-backdrop': 'static'
     }).append(content);
  
  
  // insert Modal into DOM...
  $(jqElement).after(myModal);
  
  // focus on first input when it pops up...
  myModal.on('shown', function () {
      myModal.find('select:first').focus();
     });
  </code></pre>
  
  <p>// in response to button click...
     myModal.modal('show');</p>
  
  <p>On rare occasions, the backdrop shows, but no modal is displayed. Has anyone encountered a similar problem and a workaround? I am aware IE8 does not like animated modals (use of <code>fade</code> class) and this doesn't appear to be the same issue as we don't use fade. The issue appears in FF, Chrome and IE, but like the Spanish Inquisition, never when I'm expecting it.</p>
  
  <p>The failure appears to be within the <code>modal('show')</code> execution. It seems that the modal exists but is not unhidden. I believe this should be achieved by adding the <code>in</code> class to the modal. The <code>show</code> and <code>shown</code> events do occur however. From looking at the bootstrap code, the fact that the shown event occurs means that the event is not prevented from default behaviour.</p>
  
  <p><strong>Note</strong> This is a question similar to one I posted earlier, but I have added some more information concerning how it fails.</p>
  
  <p>Please also note that I cannot update to <a href="http://getbootstrap.com/" rel="nofollow">Bootstrap 3</a>. I am responsible for making small changes to an already released product and a change of basic libraries is a non-starter.</p>