On my mobile website, I needed to hide a lightbox connected to a box and have the box redirect to a different page when clicked.
I implemented the code below to hide the lightbox.
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
if(wixWindow.formFactor === "Mobile"){
$w('#lightbox1').hide();
}
});
Next, I used this code to achieve the redirection upon clicking the box.
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';
$w.onReady(function () {
if(wixWindow.formFactor === "Mobile"){
$w('#box3').onClick(function(){
wixLocation.to('/flagevt-mob');
});
}
});
Although the redirection works when clicking on box3 in mobile view and the lightbox is hidden, there is still some shading that requires an additional click to remove. It's like popping a bubble.
If anyone could assist with why this issue is happening, it would be greatly appreciated.
For reference, here is a link to the site. Feel free to check it out on both desktop and mobile views. You can identify the box associated with box3 by locating the text "FLAGSHIP EVENTS" on the page.