When a search window pops up in the search app, there is no close button, so I have to click on the outside of the popup window to make it disappear. So it would be handy to have a close button.
Happy to see you on our forum! Welcome, @Teo_Chung
I agree that it would be awesome to have this option as a widget’s setting. We’ll try to consider this opportunity in the future, especially if more users upvote it
As for now, we’ll be happy to create a custom close button for you. Would you like to have it as a simple cross icon?
Yes, A simple cross icon is fine.
Okay, I’ve passed this idea on to the devs. I’ll report back once the solution is ready
Please add this code to the Custom CSS field on the Settings tab of your widget’s settings:
.global-styles,
[class*='Popup__Container-sc']::after {
content: '\00d7';
font-size: 24px;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 5px;
right: 5px;
background: rgba(17, 17, 17, 0.1);
font-weight: bold;
border-radius: 50%;
width: 24px;
height: 24px;
cursor: pointer;
}
And this script should be added to the Custom JS field on the Settings tab:
document.addEventListener("click", ({ target, clientX, clientY }) => {
const popup = target.closest("[class*='Popup__Container-sc']");
if (popup) {
return;
}
const rect = popup.getBoundingClientRect();
const afterRight = rect.right - 5;
const afterLeft = afterRight - 24;
const afterTop = rect.top + 5;
const afterBottom = afterTop + 24;
if (
clientX >= afterLeft &&
clientX <= afterRight &&
clientY >= afterTop &&
clientY <= afterBottom
) {
document.body.click();
}
});
Try it out and let me know if you like the result
Thanks for the custom code, but I tested it after applying it and the close button doesn’t work.
Could you please send me a link to the page, where your widget is installed?
autobritedirect.co.kr
We’ve adjusted the codes and added them to your widgets.
Custom JS:
document.addEventListener("click", ({ target, clientX, clientY }) => {
const popup = target.closest("[class*='Popup__Container-sc']");
if (!popup) {
return;
}
const rect = popup.getBoundingClientRect();
const afterRight = rect.right - 5;
const afterLeft = afterRight - 24;
const afterTop = rect.top + 5;
const afterBottom = afterTop + 24;
if (
clientX >= afterLeft &&
clientX <= afterRight &&
clientY >= afterTop &&
clientY <= afterBottom
) {
document.body.click();
}
});
Custom CSS:
.global-styles,
[class*='Popup__Container-sc']::after {
content: '\00d7';
font-size: 24px;
line-height: 18px;
display: flex;
justify-content: center;
position: absolute;
top: 5px;
right: 5px;
background: rgba(17, 17, 17, 0.1);
font-weight: bold;
border-radius: 50%;
width: 24px;
height: 24px;
cursor: pointer;
}
Please check your website and let me know if you like the result
It works!!!