(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Create POPUP with Elementor Free
Create POPUP with Elementor Free and no extra plugin, customize it to your liking. Make any element clickable top open popup. If you wish to add a popup on page load, please watch above video and do correct changes the code to make it work.
Hi!
I'm Mayuresh Koli
Empower Your Business with Speedy, No-Code Websites. Are you looking to boost your online presence? I’m here to help. With my expertise in graphics design and WordPress website development, I create fast and efficient websites using No Code Builders.
- dm-popup is the CSS class for the popup container.
- –anim-in and –anim-out are global variables used for animation in and animation out timing. Do not change the name unless you know how to change the code appropriately. Make sure to keep the values in “ms” as this values are retrieved by javascript.
- dm-popup-overlay is the CSS class of the container that is full screen and behind our popup.
- @keyframes dmFadeIn and dmFadeOut are animations for entry and exit of popup. You can add any animation you want here.
- dm-popup-link is the CSS class of any element that opens the POPUP.
- dm-popup-close is the CSS class of element that closes the popup. It can be added to anything inside popup, example X icon, text or top bar as in above example.
<style>
.dm-popup {
/*Keep this values in ms*/
--anim-in: 200ms;
--anim-out: 200ms;
position: fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
animation: dmFadeOut var(--anim-out) linear forwards;
display: none;
}
.dm-popup-overlay {
position: fixed;
left:0;
top:0;
display: none;
}
.dm-popup.show {
animation: dmFadeIn var(--anim-in) linear forwards;
}
.dm-popup-overlay.show {
animation: dmFadeIn var(--anim-in) linear forwards;
}
.dm-popup-close, .dm-popup-link {
cursor: pointer;
}
@keyframes dmFadeIn {
0% {
opacity: 0;
transform: translate(-50%,-50%) scale(0);
}
100% {
opacity:1;
transform: translate(-50%,-50%) scale(1);
}
}
@keyframes dmFadeOut {
0% {
opacity: 1;
transform: translate(-50%,-50%) scale(1);
}
100% {
opacity:0;
transform: translate(-50%,-50%) scale(0);
}
}
</style>
<script>
const dmPopup = document.querySelector('.dm-popup');
const dmPopupLink = document.querySelector('.dm-popup-link');
const dmPopupClose = document.querySelector('.dm-popup-close');
const dmPopupOverlay = document.querySelector('.dm-popup-overlay');
const dmPopupStyles = getComputedStyle(dmPopup);
const dmPopupAnimOut = dmPopupStyles.getPropertyValue('--anim-out').trim();
//Extract numeric part of anim-out
const delayTime = parseFloat(dmPopupAnimOut);
dmPopupLink.addEventListener('click', () => {
dmPopup.style.display = 'flex';
dmPopupOverlay.style.display = 'flex';
dmPopup.classList.add('show');
dmPopupOverlay.classList.add('show');
});
dmPopupClose.addEventListener('click', () => {
setTimeout(()=> {
dmPopup.style.display = 'none';
dmPopupOverlay.style.display = 'none';
},delayTime);
dmPopup.classList.remove('show');
dmPopupOverlay.classList.remove('show');
});
dmPopupOverlay.addEventListener('click', () => {
setTimeout(()=> {
dmPopup.style.display = 'none';
dmPopupOverlay.style.display = 'none';
},delayTime);
dmPopup.classList.remove('show');
dmPopupOverlay.classList.remove('show');
});
</script>
