CSS未應用於元素

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內容下方