title: JQuery dialog - make background transparent but still moveable
body: <p>I'm trying to add a transparent JQuery dialog. But I'm running into two issues:</p>
  
  <ul>
  <li>The background on the text, "Hello", won't become transparent</li>
  <li>After removing the titlebar, I can no longer drag the dialog</li>
  </ul>
  
  <p>The comments are what I tried so far.</p>
  
  <pre><code>    //Create new components
      var newComponent= "&lt;div id='Component"+ componentOffset  +"' class='ui-widget'&gt;&lt;h1&gt;Hello&lt;/h1&gt;&lt;/div&gt;";
      $('#rootArea').append(newComponent);
      $('#Component' + componentOffset).dialog({
          dialogClass: 'transparent-dialog'
      });
      //$('#Component' + componentOffset).css('background-color', 'rgba(255,255,255,0.0)');
      //Adding style to newComponent div: style='background-color: rgba(255,255,255,0.0); '
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.transparent-dialog {
      background-color: rgba(255,255,255,0.0);    
  }
  
  .transparent-dialog .ui-dialog-titlebar {
  display:none
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/1ZOCK.png" alt="enter image description here"></p>
  
  <p>The goal is to make it only show borders and background upon hovering over. I figured I could also display the title bar again upon hovering. This way I can still drag the component without to much trouble. </p>