为什么我的 JQuery DIV 是透明的？

【问题标题】：Why is my JQuery DIV transparent?为什么我的 JQuery DIV 是透明的？
【发布时间】：2012-06-20 06:56:02
【问题描述】：

我的 Jquery ajax 页面加载并显示在 DIV 中，该 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，因为它无法将页面从 Internet 加载到 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>

【问题讨论】：

  • 据我了解您的代码，弹出窗口包含一个完整的 html 页面，其中包含 和所有内容。如果你想把它放在页面中间，你必须把它放在 iframe 中。将它放在
    中可能会破坏您的页面。
  • @aaberg 我是否应该只使用表格作为弹出窗口？这与我让弹出窗口正常的问题有关吗？
  • 不，您需要从放置在弹出窗口中的标记中删除标题和尾部部分（因为页面已经有标题部分等），或者将其放入 iFrame - 其中然后是一个新窗口，需要所有标题标签
  • @RemarkLima 这不是我说的吗？我从弹出窗口中删除了 html 标题和尾部部分，剩下的只是表格和正文内的 div。但这并不能回答问题。我可以将其修复为不完整的页面，并且我认为它不应该是 iframe。谢谢。
  • @NickRosencratz 道歉，我误读了您的声明，并认为您打算将数据注入 table，而不是 div。所以是的，你是对的，只要它从data 中删除（根据我的回答）。你是说，一旦完成，它仍然是透明的？

标签： javascript jquery html css


【解决方案1】：

应该有一个明确的解决方案和透明度真的 不应该是元素的默认状态，所以元素怎么来 以透明度呈现？

实际上，除非您为元素指定明确的背景颜色，否则默认是它们是透明的。这样才能显示真实的页面背景。

只需在弹出 div 上添加背景颜色（如果合适，还可以添加 z-Index）应该然后使其按预期显示为叠加层。

如果它不起作用，那么 某事 正在阻止使用您提供的（正确的）CSS。

也许您应该从加载的页面中删除额外的 HTML 正文等？页面中不应同时出现两个 &lt;body&gt; 标记。如果您无法更改加载的页面（例如，如果它也用作独立页面），请尝试以下操作：

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

代替：

popup.html(data);

【讨论】：

  • @NickRosencratz 不，透明度绝对是正确的默认行为。你需要确定为什么你的（正确的）CSS 没有被应用，而不是抱怨默认值。
  • 好的，我错了，透明是很好的默认值。我想我无论如何都可以修复它，如果我们同意它在我应该查看的 CSS 中并且这不是未关闭或错误/嵌套的 DIV。我可以使用不使用 JQuery 的弹出窗口制作页面的基本版本，而只是使用 CSS 呈现的 DIV，这是一个不错的解决方案，而使用 JQuery 会更好，其中元素可以重新定位和拖动。非常感谢您的帮助。
  • @NickRosencrantz 不客气 - 我建议阅读“CSS 特异性规则”以帮助理解为什么有时规则会被忽略。
【解决方案2】：

使用以下代码将背景颜色应用到 div

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

【讨论】：

  • 试过了，没有任何变化。无论如何，谢谢。
  • 很抱歉告诉你.newpopup后面有一个空格请用这个$(".newpopup").css('background-color', 'white');并尝试一次。通知是否不起作用
  • 非常感谢您的帮助。我现在尝试了没有空格和相同的结果，但不起作用。我怀疑我的页面可能具有损坏的 DOM 结构，例如破坏页面的未关闭元素。我已经设法修复了弹出窗口的旧方式，直接从同一页面加载并且不可重新定位/不可拖动，但至少它是我们可以使用的东西。
【解决方案3】：

所以，如果我没看错的话，您的 jQuery 脚本正在读取一个 .jsp 文件，该文件包含完整的标题集、正文等...

您应该将弹出窗口的内容放入iFrame 或去掉&lt;body&gt; 之前（包括）和&lt;/body&gt; 之后（包括）之后的所有标签

【讨论】：

  • 实际上他似乎只是在填充元素，而不是创建它。
  • 再看也是如此。但是，他仍在将整个头部部分加载到其中，因此它是 iFrame 或丢失标题。 （考虑您的 cmets 编辑答案）
  • 我不得不重新设计页面，现在我可以使用不使用 JQuery 的弹出窗口来处理它，我认为如果按照我们在这里讨论的方式进行操作会更好即带有 JQuery 的弹出窗口是可重新定位和可拖动的，而我的普通 DIV 不是。因此，在接下来的几天内，我将再次研究这个用例，这一次有一个更好的基础可以工作。非常感谢您帮助我:-)
  • 很高兴听到@NickRosencratz！看看内置的 jQuery UI 模态对话框 jqueryui.com/demos/dialog 或类似 sprymedia.co.uk/article/Alert+-+Javascript+dialogue+controls 的东西让你开始:)
【解决方案4】：

您将在 .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>

【讨论】：

  • 试过了，没有任何变化。无论如何，谢谢。
  • 非常感谢。我将在接下来的几天内尝试一下。我重新设计了页面的底部，以便它现在可以变得更加模块化。输出是 5000 行 HTML 进行故障排除有点痛苦，但是我认为如果我将 DIV 切换为使用 JQuery，我们可以将其减少到大约 2000 行，而不是从文件中加载 DIV 内容，而不是在与原始请求同时进行。
猜你喜欢
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode