我在我的网站上创建了一个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/
答案 0 :(得分：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选择器之前，因此该选择器会被忽略。
如果删除这些行，你应该很好！