JSFiddle - React, Tailwind, and code Playground

by mahassan

HTML

<div class="container">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <footer class="footer"></footer>
        <button class="cta">Open Modal</button>
    </div>

CSS

.modal{
 /* display: none; */
 border:2px solid black;
}

JavaScript

let button = document.querySelector('.cta');
let modal = document.querySelector('.modal');
let container = document.querySelector('.container');
let footer = document.querySelector('.footer');
let close = document.querySelector('[class^="popUp__close-scx"]');

button.addEventListener("click", function() {
 footer.insertAdjacentHTML('afterend', `
 <div class="modal popUp__wrapper-scxdxcfd">
 <div class="popUp__header-scxdxcfd">
     <button class="popUp__close-scxdxcfd">
         <svg class="popUp__close-icon-scxdxcfd" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M2.5 2.5L18.5 18.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             <path d="M18.5 2.5L2.5 18.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
     </button>
     <h2 class="popUp__title-scxdxcfd">
         
     </h2>
 </div>
</div>
 `)
});
const mutations = new MutationObserver((mutation)=>{
    mutation.forEach((mutation)=>{
            console.log(mutation.addedNodes.classList.contains("popUp__wrapper"));
    })
})
config = {
    childList: true,
    subtree: true,
}

mutations.observe(document.querySelector('body'), config)