javascript - JQuery DIVが透過的であるのはなぜですか？

Question

私のJqueryajaxページが読み込まれ、他のページ要素の上にあるDIVに表示されますが、DIVは透明であるか、実際には他のコンポーネントの背後にあり、透明で上にレンダリングする必要があります。背景が白い他のページよりも通常のDIVを達成するにはどうすればよいですか？要素を透明にしないのはなぜ難しいのですか？これは、ページ要素にとってどのように不快な動作になる可能性がありますか？

ここに画像の説明を入力してください

Javascript

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();
  });
})

問題を再現するためにjsfiddleを作成しようとしましたが、jsfiddleが実行できない.getか.ajax、インターネットからDIVにページをロードできなかったためです。

何を提案できますか？これには明確な解決策があるはずであり、透明度は実際には要素のデフォルト状態であってはならないので、どうして要素が透明度でレンダリングされるのでしょうか。

HTMLは簡単です

<div class="newpopup">
</div>
<button id="mypopup">popup</button>

決して到達しないような私のCSSはこれです

.newpopup {
z-index:100;
 position: absolute; 
  top:50%;
  left:50%;
  background-color:#ffffff; //not working
}

そして実際のポップアップ/divであるHTMLはこれです

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head><link href="css_js/styles.css" rel="stylesheet" type="text/css">
<title>popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
  <tr>
  <td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2> 
</td>
  <td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td>
</tr>
</table>
<br><br>
<h2 class="pusher">Sök person/företag</h2>
<div id="Vsok">

<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa s&ouml;kformul&auml;r</span>
</div>

</div>

<div id="sokF">

<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">D&ouml;lj s&ouml;kformul&auml;r</span>
</div>

<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80">
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend> 
<div class="fl30">&nbsp;F&ouml;rnamn:</div>
<div class="fl50"><input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">&nbsp;Efternamn:</div>
<div class="fl50"><input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset>

<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend> 
<div class="fl30">&nbsp;F&ouml;retag:</div>
<div class="fl50"><input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">&nbsp;Organisationsnummer:</div>
<div class="fl50"><input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset> <br><br>

<!-- <div class="fl30">Attention, c/o etc.:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>

<div class="fl30">Postadress:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>

<div class="fl30">Postnummer:</div>
<div class="fl50"><input type="text" size="30"></div>
<div class="clear"></div> -->

<div class="fl30">Postort:</div>
<div class="fl50"><input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>

<div class="fl30">Land:</div>
<div class="fl50"><input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')">&nbsp;
                    <select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
                        <option value="1" SELECTED></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5">---------------------------------</option>
</select></div>
<div class="clear"></div>

<!-- <div class="fl30">Region:</div>
<div class="fl20"><select name="">
                        <option value="1" SELECTED></option>
                        <option value="2"></option>
                        <option value="3"></option>
                        <option value="4"></option>
                        <option value="5">-----------------------------------------------</option>
</select></div>
<div class="clear"></div>
<div class="fl30">Tel:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>

<div class="fl30">Fax:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>

<div class="fl30">E-post:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
 -->
<div class="fl50">&nbsp;</div>
<div class="fl5"><input type="button" value="Rensa"></div>
<div class="fl10"><input type="button" value="  S&ouml;k  " onclick="javascript:doSubmit('Namnsokning', 'search')"></div>
<div class="clear">&nbsp;</div>
<div class="clear">&nbsp;</div>
</div>

</div>

<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>    
    <td><h3>Sökresultat:</h3></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr>    
    <td colspan="4">En massa text <span class="link">Hj&auml;lp!</span> </td>
</tr>
<tr>    
    <td><input type="button" value="Visa alla"></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
<tr class="smallb">
    <td>Antal &auml;renden: 527</td>
    <td>&nbsp;</td>
    <td>Visa &auml;renden: &#60;&#60; 1-200 201-400 401-527 &#62;&#62; </td>
<td>&nbsp;</td>
</tr>
</table>

<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id">
<tr>
    <th class="thkant">F&ouml;rnamn</th>
    <th class="thkant">Efternamn</th>
    <th class="thkant">Adress</th>
    <th class="thkant">Postnr</th>
    <th class="thkant">Postort</th>
    <th class="thkant">Region</th>
    <th class="thkant">Land</th>
    <th class="thkant">Telefonnummer</th>
</tr>


</table>


<div id="bottomV">
<table width="100%" align="center">
<tr>
<td align="left"><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'"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td>
</tr>
</table>
</div>

<div id="bottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" value="&Auml;ndra i register" style="width:150px;"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td>
</tr>
</table>

</body>
</html>

score 2 · Accepted Answer

これには明確な解決策があるはずであり、透明度は実際には要素のデフォルト状態であってはならないので、どうして要素が透明度でレンダリングされるのでしょうか。

実際、要素に明示的な背景色を指定しない限り、デフォルトでは透明になっています。これは、実際のページの背景が透けて見えるようにするためです。

ポップアップdivに背景色（および適切な場合はz-Index）を配置するだけで、期待どおりにオーバーレイとして表示されます。

それが機能していない場合は、何かがあなたが提供した（正しい）CSSの使用を妨げています。

おそらく、ロードされたページから余分なHTML本文などを削除する必要がありますか？<body>ページに一度に2つのタグを表示しないでください。ロードされたページを変更できない場合（たとえば、スタンドアロンページとしても使用されている場合）、次のようにしてみてください。

popup.empty().append($('body', data).children());

それ以外の：

popup.html(data);

score 2 · Accepted Answer

次のコードを使用して、背景色を div に適用します

$(".newpopup ").css('背景色', '白');

score 1 · Accepted Answer

したがって、私がこれを正しく読んでいる場合、jQuery スクリプトは.jsp、完全なヘッダーセット、本文などを含むファイルを読み取っています...

ポップアップのコンテンツをに配置するか、前 (および含む)および後 (および含む)iFrameのすべてのタグを削除する必要があります。<body></body>

score 0 · Accepted Answer

この属性を.newpopupクラスで試してみます

'overlayShow'   : true,
'transitionIn'  : 'elastic',
'transitionOut' : 'elastic',
'opacity'       : '0.80';

また

#popup {
margin: 0 auto;
height:100%;
width: 100%;
z-index:501;
background: #effeef;
position: absolute;
padding:0;
top: 0;
-moz-opacity:0.80;
-khtml-opacity: 0.80;

opacity: 0.80;
filter:alpha(opacity=100);
}

#window {
padding:0;
width: 200px;
height: 200px;
margin: 0 auto;
border: 3px solid #d3d4d3;
background:url(sign_in_bg.gif) repeat-x;
position: absolute;
top: 200px;
left: 45%;
}

<div id="popup" align="center" style="display:none">
<div id="window" align="center">
content....
</div>

javascript - JQuery DIVが透過的であるのはなぜですか？

4 に答える 4

Related

Reference