On click pop up not working

Question

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>

The CSS for it..

/*-----------------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>

The CSS for it...

.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?

It works on the jfiddle, but not my site? https://jsfiddle.net/pfar54/1dam0jo2/

Answer 1

Ok! Found the issue after looking at buyfarbest.com.

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;

Since they come right before the .productquickviewcontainer selector, that selector gets ignored.

If you delete those lines, you should be good!