Solved

Dawn Theme - custom code link pop-up z-index issue/white space

xnyjyh
Excursionist
134 0 6

Hello, I have a custom-coded link pop-up on my product pages. There seems to be a z-index issue that I cannot solve using z-index for some odd reason. see images... the pop-up goes under the menu bar and custom logo sections. Also, the overlay when the pop-up is active does not cover the whole page as it should. I would also, like to disable the scroll and hide the scroll bar on the active popup. how can these issues be fixed? code below and images to show issues.

CODE:

<div class="box">
<a class="button" href="#popup1">Shipping details</a>
</div>

<div id="popup1" class="overlay">
<div class="popup">
<h2 style="font-size:20px">Shipping and payment options</h2>
<a class="close" href="#">&times;</a>
<div class="content" style="font-family: work sans; font-size:14px;">
<p class="free">Free complimentary shipping when you spend $300 CAD or more.</p>
<br>
Shipping can be verified at any time by using the tracking number provided via email.
<br><br>
You may return damaged, defective, or wrong size/color products within 20 days of original order date.
<br><br><br>
<p class="secure">Secure payment</p>
<br>
We guarantee the maximum level of security for all transactions.<br><br>
We accept:
<br><br>
<img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/payment_icons.jpg?v=1705810740" width="400">
<br><br>
<hr style="background-color:#ebebeb;"><br>
<h2 style="font-size:20px">May we help you?</h2>
<br>
Contact us
<br>
<p><a href="mailto:tansi@howahoriginals.com" style='color: black;'>Send us a message</a></p>


</div>
</div>
</div>

<style>
h2 {
text-align: left;
font-family: work sans;
font-weight:500;
color: #000;

}

.payment {
max-width: 200px;
}

.button {
font-family: work sans;
font-weight: 500;
font-size: 14px;
padding: 10px;
color: #000;
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
text-decoration: none;
}

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}

.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
}

.popup h2 {
margin-top: 0;
color: #000;
font-family: work sans;
}
.popup .close {
position: absolute;
top: 10px;
right: 20px;
transition: all 200ms;
font-size: 30px;
font-weight: 500;
text-decoration: none;
color: #000;
}
.popup .content {
max-height: 30%;
overflow: auto;
}

@media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
.secure{font-weight:500;}
.free{font-weight:500;}

</style>

 

IMAGES:

space on bottom.pngz-index issue.png

Accepted Solution (1)
theycallmemakka
Shopify Partner
1157 249 267

This is an accepted solution.

Hi @xnyjyh ,

 

 

Replace the previous code with this updated code. This should make the header sticky.

 

{% if product %}
<style>
body:has(.overlay:target) {
    overflow: hidden!important;
}
body:has(.overlay:target) main#MainContent {
    z-index: 4!important;
}
div#popup1 {
    margin-bottom: 0px!important;
    margin-top: 0px!important;
}
body:has(.overlay:target) button.sticky-cart-button.uplinkly-sticky-cart-button {
    z-index: 3!important;
}
</style>
{% endif %}

 

 

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store

View solution in original post

Replies 7 (7)

theycallmemakka
Shopify Partner
1157 249 267

Hi @xnyjyh ,

 

Can you provide link to your store?

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store

theycallmemakka
Shopify Partner
1157 249 267

Hi @xnyjyh ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
div#popup1 {
    margin-bottom: 0px!important;
    margin-top: 0px!important;
}
main#MainContent {
    z-index: 4!important;
}
button.sticky-cart-button.uplinkly-sticky-cart-button {
    z-index: 3!important;
}
</style>

RESULT:

theycallmemakka_0-1705981680606.png

 

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
xnyjyh
Excursionist
134 0 6

It does work, thank you! I need to disable page scroll and hide the side scroll bar. Ive tried a few way and was unsuccessful 😞 is this easy?

theycallmemakka
Shopify Partner
1157 249 267

Hi @xnyjyh ,

 

Replace the previous code and see if that disables the scroll.

 

<style>
body:has(.overlay:target) {
    overflow: hidden!important;
}
div#popup1 {
    margin-bottom: 0px!important;
    margin-top: 0px!important;
}
main#MainContent {
    z-index: 4!important;
}
button.sticky-cart-button.uplinkly-sticky-cart-button {
    z-index: 3!important;
}
</style>

 

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
xnyjyh
Excursionist
134 0 6

Perfect it worked, one more thing, my header is supposed to be sticky. all pages content over laps it now.

theycallmemakka
Shopify Partner
1157 249 267

This is an accepted solution.

Hi @xnyjyh ,

 

 

Replace the previous code with this updated code. This should make the header sticky.

 

{% if product %}
<style>
body:has(.overlay:target) {
    overflow: hidden!important;
}
body:has(.overlay:target) main#MainContent {
    z-index: 4!important;
}
div#popup1 {
    margin-bottom: 0px!important;
    margin-top: 0px!important;
}
body:has(.overlay:target) button.sticky-cart-button.uplinkly-sticky-cart-button {
    z-index: 3!important;
}
</style>
{% endif %}

 

 

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
xnyjyh
Excursionist
134 0 6

Would you know why after closing the form the page goes back to top? I dont like that lol. Would like it to stay right where it was opened.