Create POPUP with Elementor Free

(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 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.

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>