Databases
StackOverflow2013
Postsdbo
POWhy is my JQuery DIV transparent?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is my JQuery DIV transparent?
    primarykey
    data
    text
    <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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USNiklas Rosencrantz
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhy is my JQuery DIV transparent?
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POWhy is my JQuery DIV transparent?
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POWhy is my JQuery DIV transparent?
      1. This table or related slice is empty.
      1. VTDownMod
    1. COA jsfiddle would be useful.
      singulars
      1. POWhy is my JQuery DIV transparent?
      1. USThiefMaster
    2. COAs I understand your code, the popup contains a full html page with <!DOCTYPE> <html> <head> <body> and everything. If you want to put this into the middle of your page, you have to put it inside a iframe. To put it inside a <div> will probably break your page.
      singulars
      1. POWhy is my JQuery DIV transparent?
      1. USaaberg
    3. CO@aaberg Should I instead just use a table for my popup? Does it have to do with my problem getting the popup normal?
      singulars
      1. POWhy is my JQuery DIV transparent?
      1. USNiklas Rosencrantz
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload