title: How to make my popup not transparent and sideways draggable?
body: <p>I'm making a Jquery popup / dialog and I've manged to position it on the page at a click so that the div renders over the other elements but the page is transparent and when I drag it, I can drag it upwards and downwards but when I drag it sideways it resizes instead of moves. can you tell me what I could do to resolve these 2 issues?</p>
  
  <p>It looks like this</p>
  
  <p><img src="https://i.stack.imgur.com/zFBwE.png" alt="enter image description here"></p>
  
  <p>My popup HTML is</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;popup&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb"&gt;
    &lt;tr&gt;
    &lt;td colspan="3" class="pusher TB_nb"&gt;&lt;h2&gt;Sök person/företag&lt;/h2&gt; 
  &lt;/td&gt;
    &lt;td&gt;&lt;a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" &gt;X&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;h2 class="pusher"&gt;Sök person/företag&lt;/h2&gt;
  &lt;div id="Vsok"&gt;
  
  &lt;div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;"&gt;
  &lt;span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm"&gt;Visa s&amp;ouml;kformul&amp;auml;r&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="sokF"&gt;
  
  &lt;div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;"&gt;
  &lt;span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm"&gt;D&amp;ouml;lj s&amp;ouml;kformul&amp;auml;r&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80"&gt;
  &lt;fieldset style="border: 1px solid Grey; display:inline;"&gt;&lt;legend class="small"&gt;Fysisk&lt;/legend&gt; 
  &lt;div class="fl30"&gt;&amp;nbsp;F&amp;ouml;rnamn:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;div class="fl30"&gt;&amp;nbsp;Efternamn:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"&gt;&lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;fieldset style="border: 1px solid Grey; display:inline;"&gt;&lt;legend class="small"&gt;Juridisk&lt;/legend&gt; 
  &lt;div class="fl30"&gt;&amp;nbsp;F&amp;ouml;retag:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;div class="fl30"&gt;&amp;nbsp;Organisationsnummer:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"&gt;&lt;/div&gt;
  &lt;/fieldset&gt; &lt;br&gt;&lt;br&gt;
  
  &lt;!-- &lt;div class="fl30"&gt;Attention, c/o etc.:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="60"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;div class="fl30"&gt;Postadress:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="60"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;div class="fl30"&gt;Postnummer:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="30"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt; --&gt;
  
  &lt;div class="fl30"&gt;Postort:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;div class="fl30"&gt;Land:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')"&gt;&amp;nbsp;
                      &lt;select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')"&gt;
                          &lt;option value="1" SELECTED&gt;&lt;/option&gt;
                          &lt;option value="2"&gt;&lt;/option&gt;
                          &lt;option value="3"&gt;&lt;/option&gt;
                          &lt;option value="4"&gt;&lt;/option&gt;
                          &lt;option value="5"&gt;---------------------------------&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;!-- &lt;div class="fl30"&gt;Region:&lt;/div&gt;
  &lt;div class="fl20"&gt;&lt;select name=""&gt;
                          &lt;option value="1" SELECTED&gt;&lt;/option&gt;
                          &lt;option value="2"&gt;&lt;/option&gt;
                          &lt;option value="3"&gt;&lt;/option&gt;
                          &lt;option value="4"&gt;&lt;/option&gt;
                          &lt;option value="5"&gt;-----------------------------------------------&lt;/option&gt;
  &lt;/select&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;div class="fl30"&gt;Tel:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="40"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;div class="fl30"&gt;Fax:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="40"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  
  &lt;div class="fl30"&gt;E-post:&lt;/div&gt;
  &lt;div class="fl50"&gt;&lt;input type="text" size="60"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
   --&gt;
  &lt;div class="fl50"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="fl5"&gt;&lt;input type="button" value="Rensa"&gt;&lt;/div&gt;
  &lt;div class="fl10"&gt;&lt;input type="button" value="  S&amp;ouml;k  " onclick="javascript:doSubmit('Namnsokning', 'search')"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;table width="100%" border="0" cellspacing="0" cellpadding="4" align="center"&gt;
  &lt;tr&gt;    
      &lt;td&gt;&lt;h3&gt;Sökresultat:&lt;/h3&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;    
      &lt;td colspan="4"&gt;En massa text &lt;span class="link"&gt;Hj&amp;auml;lp!&lt;/span&gt; &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;    
      &lt;td&gt;&lt;input type="button" value="Visa alla"&gt;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="smallb"&gt;
      &lt;td&gt;Antal &amp;auml;renden: 527&lt;/td&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
      &lt;td&gt;Visa &amp;auml;renden: &amp;#60;&amp;#60; 1-200 201-400 401-527 &amp;#62;&amp;#62; &lt;/td&gt;
  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id"&gt;
  &lt;tr&gt;
      &lt;th class="thkant"&gt;F&amp;ouml;rnamn&lt;/th&gt;
      &lt;th class="thkant"&gt;Efternamn&lt;/th&gt;
      &lt;th class="thkant"&gt;Adress&lt;/th&gt;
      &lt;th class="thkant"&gt;Postnr&lt;/th&gt;
      &lt;th class="thkant"&gt;Postort&lt;/th&gt;
      &lt;th class="thkant"&gt;Region&lt;/th&gt;
      &lt;th class="thkant"&gt;Land&lt;/th&gt;
      &lt;th class="thkant"&gt;Telefonnummer&lt;/th&gt;
  &lt;/tr&gt;
  
  
  &lt;/table&gt;
  
  
  &lt;div id="bottomV"&gt;
  &lt;table width="100%" align="center"&gt;
  &lt;tr&gt;
  &lt;td align="left"&gt;&lt;input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"&gt;&lt;/td&gt;
  &lt;td align="right"&gt;&lt;input type="button" value="Avbryt" style="width:150px;" class="checkmargin"&gt;&lt;input type="button" value="Infoga" disabled style="width:150px;"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div id="bottomA" style="display: none"&gt;
  &lt;table width="100%" align="center"&gt;
  &lt;tr&gt;
  &lt;td align="left"&gt;&lt;input type="button" value="&amp;Auml;ndra i register" style="width:150px;"&gt;&lt;/td&gt;
  &lt;td align="right"&gt;&lt;input type="button" value="Avbryt" style="width:150px;" class="checkmargin"&gt;&lt;input type="button" value="Infoga" style="width:150px;"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS is</p>
  
  <pre><code>.newpopup {
    position: absolute; 
    top:50%;
    left:50%;
  } 
  </code></pre>
  
  <p>The Javascript is</p>
  
  <pre><code>function popup() {
      alert('test');
      var popup = $('.newpopup');
      popup.draggable();
      popup.resizable();
      //popup.html('&lt;p&gt;Where is pancakes house?&lt;/p&gt;');
      //popup.show('fast');
  
         $.get('/PandoraArendeWeb/popup.jsp', function(data) {   
  
          popup.html(data); 
          popup.show('fast'); 
      }); 
  
      var screen_width = $(document).width();
  var screen_height = $(document).height();
  var box_width = popup.width();
  var box_height = popup.height();
  
  var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
  var left = (screen_width - box_width) / 2;
      popup.css({ 'position': 'absolute', 'top':top, 'left':left });
  }
  $(document).ready(function(){
    $('button').click(function(){
       popup();
    });
  })
  </code></pre>
  
  <p>Please tell me how to</p>
  
  <p>1) make the popup not transparent
  2) make the popup sideways draggable</p>
  
  <p>The HTML that actually activates the popup is trivial:</p>
  
  <pre><code>&lt;div class='newpopup'&gt;
  &lt;/div&gt;
  &lt;button&gt;popup&lt;/button&gt;
  </code></pre>
  
  <p>Thank you</p>