Solved

Dawn Theme - basic pop turn to slide in modal

xnyjyh
Excursionist
141 0 6

Hello, I have a basic popup. I've been trying to convert it to slide from right as full screen on mobile and 50% on desktop, but unsuccessful. Maybe someone knows an easy way to do this? Thanks in advance! Code below:

 

<div class="box">
<a class="pop-button" href="#popup2">Contact us</a>
</div>

<div id="popup2" class="overlay">
<div class="popup">
<h2 style="font-size:20px!important;text-align: left;font-family: work sans!important;font:semibold;color: #000;">Contact</h2>
<a class="close" href="#">&times;</a>
<div class="content">
{% section 'contact-form-popup' %}

</div>
</div>
</div>
<style>
.payment {
max-width: 200px;
}
.pop-button {
padding-left: 0px!important;
font-family: work sans!important;
font-weight: 600!important;
font-size: 14px!important;
padding: 10px;
color: #000!important;
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
transition: all 0.3s ease-out;
}
.pop-button:hover {
text-decoration: none;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(245, 245, 245, 0.85)!important;
transition: opacity 500ms;
visibility: hidden;
z-index:9999;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
width: 40%;
position: relative;
transition: all 5s ease-in-out;
z-index: 10000!important;
opacity: 1;
}
.popup h2 {
margin-top: 40px;
color: #000;
font-family: work sans;
}
.popup .close {
position: absolute;
top: 0px;
right: 17px;
transition: all 200ms;
font-size: 30px;
font-weight: 100;
text-decoration: none;
color: #000;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
@media screen and (max-width: 740px){
.box{
width:90%;
}
.popup{
width:90%;
}
}
.free-secure{font-size:14px!important;font-weight:500;color:black;}
.default-text{font-size:14px!important;font-weight:300;color:black;}
</style>

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1164 302 231

This is an accepted solution.

Put this CSS at the very bottom of the existing styles. 

.popup {
    margin: 0 !important;
    padding: 20px;
    background: #fff;
    width: 50% !important;
    position: absolute !important;
    transition: all 5s ease-in-out;
    z-index: 10000!important;
    right: 0 !important;
    height: 100vh !important;
}

.popup .content {
    max-height: 100% !important;
    overflow: auto;
}

@media only screen and (max-width: 768px) {
    .popup {
        width: 100% !important;
    }
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
1164 302 231

Hey @xnyjyh,

Can you put this code into a demo store of yours and provide the preview link, If I were to test this, I'd have to build it from scratch on my own store cause I don't even have the {% section 'contact-form-popup' %} which would be very time consuming. Hope you understand!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

ThePrimeWeb
Shopify Partner
1164 302 231

Hey @xnyjyh 

Just add this to CSS

.overlay .popup {
  transform: translateX(100%);
  transition: all 1s;
}

.overlay:target .popup {
  transform: translateX(0%);
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
xnyjyh
Excursionist
141 0 6

Awesome. How can I get the desktop view 50% width and 100% mobile view? To match cart drawer width/height for both mobile and desktop? Thanks

ThePrimeWeb
Shopify Partner
1164 302 231

This is an accepted solution.

Put this CSS at the very bottom of the existing styles. 

.popup {
    margin: 0 !important;
    padding: 20px;
    background: #fff;
    width: 50% !important;
    position: absolute !important;
    transition: all 5s ease-in-out;
    z-index: 10000!important;
    right: 0 !important;
    height: 100vh !important;
}

.popup .content {
    max-height: 100% !important;
    overflow: auto;
}

@media only screen and (max-width: 768px) {
    .popup {
        width: 100% !important;
    }
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
xnyjyh
Excursionist
141 0 6

Sweet, it worked. Thanks sp much!