title: Bring JQuery Dialog to front
body: <p>I'm trying to use a JQuery dialog for deletion confirmation but I cannot seem to get it to show in front of everything so that it prevents interaction with other controls until its closed.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>&lt;script&gt;
  function deleteItem(id) {
  
      $('body').append('&lt;div id="confirm" title="Confirm Delete"&gt;' +
      '&lt;p&gt;&lt;span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"&gt;&lt;/span&gt;' +
      'The item will be deleted. Are you sure?&lt;/p&gt;&lt;/div&gt;');
  
      $(function() {
          $('#confirm').dialog({
              resizable: false,
              height: 185,
              modal: true,
              show: {
                  effect: 'slide',
                  duration: 200
              },
              hide: {
                  effect: 'slide',
                  duration: 200
              },
              buttons: {
                  'Delete': function() {
                      //Deletion code
                      $(this).dialog('close');
                  },
                  Cancel: function() {
                      $(this).dialog('close');
                  }
              }
          });
      });
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>Please help. Thank you.</p>