How can I fix the overlay issue in Dawn theme's popup window?

Store Design
, , , ,
1

Hi guys,

I’m trying to make order attribute checkbox inside a cart, and I think I did it. I also wanted to create a popup when clicked on that checkbox to give a customer more details, however I noticed that the popup window is not in the front, some elements are still covering the it.

Loom recording:
https://www.loom.com/share/9363eead74ca4f36a474e58774e0d4fc

Is there a way to fix the CSS and make popup to be in the front?

Also is it possible to close the popup by clicking outside it, instead of clicking on the X?

It’s a theme in development, url:
https://kffwxcfb5eieardr-7708685.shopifypreview.com

Theme: Dawn 6.02

Thanks everyone!

2

Hi @dmitry_z ,

This is Victor from PageFly - Shopify Page Builder App

First to fix your popup not cover all the screen :

You have to add this CSS to your popup

#popup1.overlay {
z-index: 999;
}

And this js code is to close the popup by clicking outside it.

var popup = document.querySelector('.overlay')

 popup.onclick = (e) => { 

console.log(1) 

var close = document.querySelector('.close') 

close.click() 

} 

var popup1 = document.querySelector('.popup')

 popup1.onclick = (e) => { e.stopPropagation() }

Hope this can help you solve the issue.

Best regards,

Victor | PageFly

1 Like
3

Hi @dmitry_z ,

Layoutbase here, we suggest doing the following edits:

Step 1: Add a sub-div to the structure -

:


    

	
		## Here i am
		×
		

			We want to minimize the packaging waste and help the planet... More Text Here...

Step 2: update the corresponding css:

.overlay:target {
  z-index: 1;
}
.overlay:target .popup {
	Z-index: 5;
}
.overlay .overlay-bkg {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 2;
   width: 100%;
   height: 100%;
   display: block;
  cursor:pointer;

}

Step 3: Update Javascript:

$(‘#popup1 .overlay-bkg’).on(‘click’,function(){
 $(‘#popup1 .close’).click();
})

Hope this works out, happy building :slightly_smiling_face:

Best regards,

Layoutbase - drag & drop page builder

1 Like
4

It worked! Amazing, thank you so much! :raising_hands:

1 Like
5

Great! I’m glad it works perfectly on your end :blush: