simple-popup-js/dist/index.min.js

Zero-HTML confirm popup that injects its own DOM and CSS. Tiny, framework-free.

var i="popup-style",c="customPopup",l="confirmMessage",m="confirmYes",f="confirmNo",b=`
.customPopup {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999; text-align: center;
  opacity: 0; transition: opacity 0.2s ease;
}
.popupBody {
  background: #fff; display: inline-block;
  margin-top: 15%; padding: 20px;
  border-radius: 8px; min-width: 300px;
}
.popupBody > p { margin-bottom: 20px; }
.btn { padding: 6px 12px; border-radius: 4px; border: none; cursor:pointer; }
.btn-success { background:#28a745; color:#fff; }
.btn-warning { background:#ffc107; color:#000; }
`;function g(){if(document.getElementById(i))return;let t=document.createElement("style");t.id=i,t.textContent=b,document.head.appendChild(t)}function E(){if(document.getElementById(c))return;let t=document.createElement("div");t.id=c,t.className="customPopup",t.innerHTML=`
    <div class="popupBody">
      <p id="${l}"></p>
      <button id="${m}" class="btn btn-sm btn-success">Yes</button>
      <button id="${f}" class="btn btn-sm btn-warning">No</button>
    </div>
  `,document.body.appendChild(t)}function s(){g(),E()}function x(t){t.style.display="block",requestAnimationFrame(()=>{t.style.opacity="1"})}function a(t){t.style.opacity="0",setTimeout(()=>t.style.display="none",200)}function I(t,e,p){s();let d=document.getElementById(c),y=document.getElementById(l),n=document.getElementById(m),o=document.getElementById(f);y.innerHTML=t,x(d);let u=n.cloneNode(!0),r=o.cloneNode(!0);n.replaceWith(u),o.replaceWith(r),n=u,o=r,n.addEventListener("click",()=>{a(d),typeof e=="function"&&e()}),o.addEventListener("click",()=>{a(d),typeof p=="function"&&p()})}function h(t){return new Promise(e=>I(t,()=>e(!0),()=>e(!1)))}function B(){document.readyState==="loading"?document.addEventListener("DOMContentLoaded",s,{once:!0}):s()}function C(){let t=document.getElementById(i),e=document.getElementById(c);t&&t.parentNode&&t.parentNode.removeChild(t),e&&e.parentNode&&e.parentNode.removeChild(e)}B();export{h as customConfirm,I as customPopup,C as destroy,B as init};