点击弹出不起作用 [英] On click pop up not working
问题描述
我在我的网站上创建了一个onclick弹出式通讯，它效果很好。然后我开始创建另一个。我使用了完全相同的格式，我只是稍微改变了我的CSS来改变弹出窗口背景的大小。我的结果是发生的唯一影响是黑暗的不透明度。表单部分没有出现。我没有任何JS错误。
I created an onclick pop up in my site for a newsletter and it worked great. I then proceeded to create another one. I used the exact same format, I just changed my CSS a little bit to change the size of the background of the pop up. My result is that the only affect that takes place is the darkened opacity. The form part does not appear. I do not have any JS errors.
这是一个很棒的通讯。
This is the newsletter that works great.
<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);
}
这是不工作的部分。它正好在我的通讯代码上方。
This is the part that isn't working. It right above my newsletter code.
<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;
}
任何想法为什么我的通讯工作完美，但我的快速查看产品弹出不起作用？
Any ideas why my newsletter works perfect, but my quick view product pop up doesn't work?
它适用于jfiddle，但不适用于我的网站？
https://jsfiddle.net/pfar54/1dam0jo2/
It works on the jfiddle, but not my site? https://jsfiddle.net/pfar54/1dam0jo2/
推荐答案
好的！在查看buyfarbest.com后发现问题。
Ok! Found the issue after looking at buyfarbest.com.
检查您的 /Style.css 文件。第1544-1548行不是有效的CSS（如果不将它们嵌套在选择器中，则不能拥有CSS属性：
Check your /Style.css file. Lines 1544-1548 aren't valid CSS (you can't have CSS properties without them being nested in a selector:
-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 选择器之前，因此该选择器将被忽略。
Since they come right before the .productquickviewcontainer selector, that selector gets ignored.
如果删除那些行，你应该很好！
If you delete those lines, you should be good!
这篇关于点击弹出不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
