Question

我已经查看了其他问题，似乎没有任何工作。我有一个DIV用于创建弹出框，另一个用于创建背景灰色。我在另一个页面上使用了相同的方法，它工作正常但是在当前页面上CSS没有应用于任何一个DIV标签。这是HTML

<section id="goals" class="goals">
    <button id="addgoal" onclick="popupadd(); return false;">Add Goal</button>

    <div id="darkLayer" class="darkl" style="display:none"></div>       
    <div id="addgoalpop" class="agpop" style="display:none">

        <p><span class="">LogIn</span></p>
        <P><span class="title">Email</span> <asp:TextBox runat="server" ID="emailbox"></asp:TextBox></P>
        <P><span class="title">Password</span> <asp:TextBox runat="server" ID="passbox" TextMode="Password"></asp:TextBox></P>
        <p><Label id="errormsg"></Label></p>           

    </div>   
</section>

以下是应该应用于两个DIV标记的CSS

.agpop {
    padding:10px 10px 35px;
    text-align:center;
    vertical-align:middle;

    border:solid 1px black;
    position:absolute;
    left:50%;
    top:50%;
    background-color:white;
    z-index:100;

    height:150px;
    margin-top:-200px;

    width:200px;
    margin-left:-100px;
}

.darkl {
    background-color: white;
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    top: 0px;
    left: 0px;
}

我正在使用的JavaScript

   function popupadd()
   {
      document.getElementById("addgoalpop").style.display = 'block';
      document.getElementById("darkLayer").style.display = "";
   }

任何人都可以理解为什么会这样吗？

Answer 1

我怀疑style="display:none"导致问题。尝试删除它。

Answer 2

改变你的div

<div id="darkLayer" class="darkl" style="display:none"></div>       
 <div id="addgoalpop" class="agpop" style="display:none">

到此

<div id="darkLayer" class="darkl"></div>       
 <div id="addgoalpop" class="agpop">

否则它们不会出现，如果你想让它们隐藏起来，稍后弹出，你可以做一些触发事件的事情，并改变那些div上的样式显示。

Answer 3

你的darkLayer里面什么也没有。看起来你可能会把它用作addgoalpop内容的容器。

如果这是您的意图，请将结束div标记移动到所有addgoalpop内容

下面

CSS未应用于元素

3 个答案: