在点击弹出不起作用

Question

我在我的网站中为新闻通讯创建了一个onclick弹出窗口，效果很好。 然后，我继续创建另一个。 我使用了完全相同的格式，只是稍微更改了CSS以更改弹出窗口的背景大小。 我的结果是发生的唯一影响是变暗的不透明度。 表单部分不会出现。 我没有任何JS错误。

这是时事通讯，效果很好。

<div class="subscribebutton" onmouseover="this.style.background='#12BDB8';" onmouseover="this.style.color='white';" onmouseout="this.style.background='transparent';">
                                <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Subscribe</a>
                            </div>
<div id="light" class="newsletterenvelope"><a href = "javascript:void(0)" 

onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
                            <form id="newsletterform" action="" method="POST">
                                <span class="spanlargefont"><span class="spancenter">Subscribe To Our Newsletter</span></span>
                                <div class="floatrightinline"><p>Subscribe to our newsletter to receive special promotions and get up to date news about BuyFarBest.</p></div>
                                        <div class="center">
                                            <input class="inputbarcenter" name="name" placeholder="Name" type="text" required><br>
                                            <input class="inputbaremailcenter" name="email" placeholder="Email Address" type="email" required><br><br><br>
                                            <input id="newssubmit" name="submit" type="submit" value="Subscribe" a href = "javascript:void(0)" onclick = "document.getElementById('lightone').style.display='none';document.getElementById('fadeone').style.display='none'"></a>
                                        </div>
                            </form>
                        </div>
                        <div id="fade" class="black_overlay"></div>
                        <div id="lightone" class="newsletterthankyou"><a href = "javascript:void(0)" onclick = "document.getElementById('lightone').style.display='none';document.getElementById('fadeone').style.display='none'">Close</a>
                            <span class="spanlargefont"><span class="spancenter">Thanks for subscribing!</span></span>
                                <p class="center">It won't be long before you start getting awesome deals sent to your inbox.</p>
                        </div>
                        <div id="fadeone" class="black_overlay"></div>

CSS的..

/*-----------------Newletter form------------*/
.newsletterenvelope {
    width: 100%;
    padding: 5px 0;
    border-radius: 20px;
    border: 3px solid #4D4D4D;
    background-color: #FFFFFF;
    margin: auto;
    display: none;
    position: fixed;
    top: 27.5%;
    left: 27.5%;
    width: 45%;
    height: 45%;
    padding: 6px;
    z-index:1002;
    overflow: auto;
}
#newsletterform {
    width: 70%;
    margin: 3% 15%;
}

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

这是无效的部分。 它在我的简讯代码上方。

<div class="featuredproductscontainer">
                            <div class="featuredproducts">
                                <div class="featuredproductspic">
                                    <?php echo "<img src='productpics/". $product['img'] ."' alt='Product Pic'>"; ?>
                                        <div class="viewproductbutton">
                                            <a class="viewproductbuttonlink" href = "javascript:void(0)" onclick = "document.getElementById('viewone').style.display='block';document.getElementById('fade').style.display='block'">Quick View</a>
                                        </div>

                                </div>
                                <p><?php echo "<a href='./viewProduct.php?view_product=$id'>" . $product['name'] . "</a>"; ?></p>
                                <p> <?php echo "$" . $product['price']; ?> </p> 
                            </div>


                        <div id="view2" class="productquickviewcontainer">  
                            <div class="featuredproducts">
                                <div class="featuredproductspic">
                                    <?php echo "<img src='productpics/". $product['img'] ."' alt='Product Pic'>"; ?>
                                </div>
                                <p><?php echo "<a href='./viewProduct.php?view_product=$id'>" . $product['name'] . "</a>"; ?></p>
                                <p> <?php echo "$" . $product['price']; ?> </p> 
                            </div>
                        </div>  
                        <div id="view3" class="productquickviewcontainer">  
                            <div class="featuredproducts">
                                <div class="featuredproductspic">
                                    <?php echo "<img src='productpics/". $product['img'] ."' alt='Product Pic'>"; ?>
                                </div>
                                <p><?php echo "<a href='./viewProduct.php?view_product=$id'>" . $product['name'] . "</a>"; ?></p>
                                <p> <?php echo "$" . $product['price']; ?> </p> 
                            </div>
                        </div>
                    </div>
                    <div id="viewone" class="productquickviewcontainer"><a href = "javascript:void(0)" onclick = "document.getElementById('viewone').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
                                <div class="quickviewproductpiccontainer">
                                        <div class="quickviewproductpic">
                                            <?php echo "<img class='imgsized' src='productpics/". $product['img'] ."' alt='Product Pic'>"; ?>
                                        </div>
                                </div>
                                <div class="quickviewproductinfocontainer">
                                    fsdafdffda
                                </div>

的CSS ...

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.productquickviewcontainer {
display: none;
width: 100%;
padding: 5px 0;
border-radius: 5px;
border: 3px solid #14D2CC;
background-color: #FFFFFF;
margin: auto;
position: fixed;
top: 25%;
left: 25%;
width: 55%;
padding: 6px;
z-index: 1002;
overflow: auto;
}   

.quickviewproductpiccontainer {
    float: left;
    height: 80%;
    width:60%;
    margin-top: 10%;
    margin-bottom: 10%;
    border: 1px solid black;
}
.quickviewproductinfocontainer {
    float: right;
    height: 100%;
    margin-top: 10%;
    margin-bottom: 10%;
    border: 1px solid black;

}

为什么我的时事通讯能完美运行，但弹出的快速查看产品却无法解决？

它可以在jfiddle上运行，但不能在我的网站上运行吗？ https://jsfiddle.net/pfar54/1dam0jo2/

Answer 1

好！ 在查看buyfarbest.com之后发现了问题。

检查您的/Style.css文件。 第1544-1548行不是有效的CSS（如果没有嵌套在选择器中的属性，则无法拥有CSS属性：

-webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */
    -moz-transition: background 300ms ease-in 200ms;
    -o-transition: background 300ms ease-in 200ms;
    transition: background 300ms ease-in 200ms;
    cursor: pointer;

由于它们.productquickviewcontainer选择器，因此该选择器将被忽略。

如果删除这些行，那应该很好！