title: jQuery UI dialog on top of Bootstrap modal
body: <p>I have a Bootstrap modal that shows for filling some data, if the data is incorrect, actually I show an alert and it appears on top.</p>
  
  <p>Now I have a new requirement, create custom alert dialogs. In other parts of the form, there is not a problem, but when I have the Bootstrap modal, if I show the modal in a normal way, it appears in the bottom of the Bootstrap modal (<a href="http://jsfiddle.net/yorch/0hyobs39/13/" rel="nofollow noreferrer">example in this fiddle</a>).</p>
  
  <p>I've looked other questions like <a href="https://stackoverflow.com/questions/12715579/in-jquery-ui-dialog-is-it-possible-to-put-a-modal-dialog-on-top-of-another-moda">this</a> and <a href="https://stackoverflow.com/questions/31327258/center-two-jquery-ui-dialogs-on-top-of-each-other">this</a> and I've tried with <code>z-index</code> (<a href="http://jsfiddle.net/yorch/0hyobs39/15/" rel="nofollow noreferrer">example in this fiddle</a>) and dialog shows in top, but I cannot click anywhere</p>
  
  <pre><code>$(".ui-dialog").css({ 'z-index' : 1000 });    
  $("#myModal").css({ 'z-index' : 0 });
  </code></pre>
  
  <p>Also I've tried to disable the modal and enable the dialog without success.</p>
  
  <p>Is <a href="https://stackoverflow.com/a/4827011/3850595">this answer</a> correct, and there is no way I can achieve this without more plugins?</p>