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

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

(function(){function r(){if(!document.getElementById("popup-style")){var t=document.createElement("style");t.id="popup-style",t.textContent=".customPopup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9999;text-align:center;opacity:0;transition:opacity .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:0;cursor:pointer}.btn-success{background:#28a745;color:#fff}.btn-warning{background:#ffc107;color:#000}",document.head.appendChild(t)}}function a(){if(!document.getElementById("customPopup")){var t=document.createElement("div");t.id="customPopup",t.className="customPopup",t.innerHTML='<div class="popupBody"><p id="confirmMessage"></p><button id="confirmYes" class="btn btn-sm btn-success">Yes</button><button id="confirmNo" class="btn btn-sm btn-warning">No</button></div>',document.body.appendChild(t)}}function s(){r(),a()}function m(t){t.style.display="block",requestAnimationFrame(function(){t.style.opacity="1"})}function e(t){t.style.opacity="0",setTimeout(function(){t.style.display="none"},200)}window.customPopup=function(t,o,i){s();var n=document.getElementById("customPopup"),l=document.getElementById("confirmMessage"),c=document.getElementById("confirmYes"),p=document.getElementById("confirmNo");l.innerHTML=t,m(n);var d=c.cloneNode(!0),u=p.cloneNode(!0);c.replaceWith(d),p.replaceWith(u),d.addEventListener("click",function(){e(n),typeof o=="function"&&o()}),u.addEventListener("click",function(){e(n),typeof i=="function"&&i()})}})();