JSFiddle - React, Tailwind, and code Playground

by aswinkumar863

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) => {
    let wrapperEl = Array.from(mutation.addedNodes)
      .filter(n => n.nodeType != Node.TEXT_NODE)
      .find(n => n.matches('[class*=popUp__wrapper]'))
    if (!wrapperEl) return;
    console.log(wrapperEl.className);
  })
})
config = {
  childList: true,
  subtree: true,
}

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