title: Why is my JQuery DIV transparent?
body: <p>My Jquery ajax page loads and shows up in the DIV that lays itself over the other page elements but the DIV is transparent or it is in fact behind the other components and just looking like it is transparent and neds to render on top. How do I achieve a normal DIV over the other pages with a white background? Why is it difficult making an element not transparent? How can this be deafult behavior for a page element?</p>
  
  <p><img src="https://i.stack.imgur.com/MwghY.png" alt="enter image description here"></p>
  
  <p>Javascript</p>
  
  <pre><code>function popup() {
      alert('opening popup');
      var popup = $('.newpopup');
  
    $.ajax({url:'/PandoraArendeWeb/popup.jsp',
              error: function() {
                  alert('Error');
              },
              success: function(data) {   
                  popup.html(data); 
                  popup.show('fast');
              }
         }
     ); 
  
     /*
      popup.html("test"); 
      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>I tried creating a jsfiddle to reproduce the problem but it seems jsfiddle can't do <code>.get</code>or <code>.ajax</code>since it couldn't load a page from the internet to the DIV.</p>
  
  <p>What can you propose? There should be a clear solution to this and transparancy really should not be a default state for an element so how come the element renders with transparency?</p>
  
  <p>The HTML is trivial</p>
  
  <pre><code>&lt;div class="newpopup"&gt;
  &lt;/div&gt;
  &lt;button id="mypopup"&gt;popup&lt;/button&gt;
  </code></pre>
  
  <p>My CSS which is like it is never reached is this</p>
  
  <pre><code>.newpopup {
  z-index:100;
   position: absolute; 
    top:50%;
    left:50%;
    background-color:#ffffff; //not working
  } 
  </code></pre>
  
  <p>And the HTML that is the actual popup / div is this</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  
  &lt;html&gt;
  &lt;head&gt;&lt;link href="css_js/styles.css" rel="stylesheet" type="text/css"&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>