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

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

var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var h=(t,e)=>{for(var n in e)p(t,n,{get:e[n],enumerable:!0})},C=(t,e,n,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of I(e))!B.call(t,o)&&o!==n&&p(t,o,{get:()=>e[o],enumerable:!(c=x(e,o))||c.enumerable});return t};var N=t=>C(p({},"__esModule",{value:!0}),t);var M={};h(M,{customConfirm:()=>L,customPopup:()=>g,destroy:()=>S,init:()=>E});module.exports=N(M);var u="popup-style",s="customPopup",f="confirmMessage",y="confirmYes",b="confirmNo",k=`
.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 P(){if(document.getElementById(u))return;let t=document.createElement("style");t.id=u,t.textContent=k,document.head.appendChild(t)}function v(){if(document.getElementById(s))return;let t=document.createElement("div");t.id=s,t.className="customPopup",t.innerHTML=`
    <div class="popupBody">
      <p id="${f}"></p>
      <button id="${y}" class="btn btn-sm btn-success">Yes</button>
      <button id="${b}" class="btn btn-sm btn-warning">No</button>
    </div>
  `,document.body.appendChild(t)}function r(){P(),v()}function D(t){t.style.display="block",requestAnimationFrame(()=>{t.style.opacity="1"})}function m(t){t.style.opacity="0",setTimeout(()=>t.style.display="none",200)}function g(t,e,n){r();let c=document.getElementById(s),o=document.getElementById(f),d=document.getElementById(y),i=document.getElementById(b);o.innerHTML=t,D(c);let a=d.cloneNode(!0),l=i.cloneNode(!0);d.replaceWith(a),i.replaceWith(l),d=a,i=l,d.addEventListener("click",()=>{m(c),typeof e=="function"&&e()}),i.addEventListener("click",()=>{m(c),typeof n=="function"&&n()})}function L(t){return new Promise(e=>g(t,()=>e(!0),()=>e(!1)))}function E(){document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r,{once:!0}):r()}function S(){let t=document.getElementById(u),e=document.getElementById(s);t&&t.parentNode&&t.parentNode.removeChild(t),e&&e.parentNode&&e.parentNode.removeChild(e)}E();