0
我创建了一个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/
你可以简化代码并制作一个JSFiddle吗？一次看到所有内容都有点难度 – rickcnagy
它在jfiddle中工作，但不在我的网站上？https： //jsfiddle.net/pfar54/1dam0jo2/ – Paul
嗯...有趣的，很高兴它能在小提琴中奏效，如果我是你，我会从你的si中剔除这部分te并从小提琴中复制。如果这不起作用，请尝试暂时移除网站的其他部分，并查看需要删除哪些内容才能使弹出窗口起作用。 – rickcnagy