xq-confirm/dist/js/xq-confirm.min.js

基于Bootstrap5的Modal组件实现确认提示框，支持确认按钮、取消按钮的回调，同时也可以自动确认和自动取消，不依赖Jquery库文件和Vue、React等框架技术。

/*!
 * xq-confirm v1.0.10 (https://xqkeji.cn/demo/xq-confirm)
 * Author xqkeji.cn
 * LICENSE SSPL-1.0
 * Copyright 2024 xqkeji.cn
 */
 "use strict";(()=>{var t='<div id="xq-bs-modal" class="modal" tabindex="-1" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title"><i></i><span>title</span></h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Modal content.</p></div><div class="modal-footer"></div></div></div></div>';var e={id:"xq-bs-modal",type:"alert",size:"modal-sm",position:"modal-dialog-centered",template:t,title:"提示信息",content:"您确认要进行操作吗?",icon:"info",confirmButton:"确认",cancelButton:"取消",confirmButtonClass:"btn-primary",cancelButtonClass:"btn-secondary",confirm:()=>{},cancel:()=>{},backgroundDismiss:true,autoClose:false};var n={};var O=(t={})=>{n=Object.assign({},e);if(t){for(const o in t){if(Object.prototype.hasOwnProperty.call(n,o)){n[o]=t[o]}}}};var E=t=>{if(t in n){return n[t]}const o=n["id"];const e=document.querySelector("#"+o);if(e.hasAttribute(t)){return String(e.getAttribute(t))}return""};var j=(t,o)=>{const e=document.createRange().createContextualFragment(o);t.append(e)};var o={info:"bi bi-info-circle-fill link-primary",warn:"bi bi-info-circle-fill link-warning",error:"bi bi-info-circle-fill link-danger"};var D=t=>{if(Object.prototype.hasOwnProperty.call(o,t)){return o[t]}else{return t}};var s=(t={})=>{O(t);const o=E("template");j(document.body,o);const e=E("id");const s=document.querySelector("#"+e);if(s){const n=s.querySelector(".modal-dialog");const a=E("size");const c=E("position");n.classList.add(a);n.classList.add(c);const i=s.querySelector(".modal-title>i");const l=s.querySelector(".modal-title>span");const r=s.querySelector(".modal-body>p");if(i){const d=E("icon");const u=D(d);i.className=u}if(l){const m=E("title");l.innerHTML=m}if(r){const b=E("content");r.innerHTML=b}if(typeof bootstrap!==void 0&&typeof bootstrap.Modal!==void 0){const f=new bootstrap.Modal(s);const p=document.querySelector(".modal-footer");if(p){const y=E("type");if(y!=="alert"){const g=E("cancelButtonClass");const x=E("cancelButton");j(p,'<button id="xq-bs-modal-cancel" type="button" class="btn '+g+'" data-bs-dismiss="modal">'+x+"</button>");const w=p.querySelector("#xq-bs-modal-cancel");w?.addEventListener("click",t=>{t.preventDefault();f.hide();const o=E("cancel");if(o!==null){o()}})}const q=E("confirmButtonClass");const h=E("confirmButton");j(p,'<button id="xq-bs-modal-confirm" type="button" class="btn '+q+'">'+h+"</button>");const S=p.querySelector("#xq-bs-modal-confirm");S?.addEventListener("click",t=>{t.preventDefault();f.hide();const o=E("confirm");if(o!==null){o()}})}s.addEventListener("hidden.bs.modal",()=>{f.dispose();s.remove()});const v=E("autoClose");if(v){const C=v;if(C.indexOf("|")){const L=C.split("|");const B=L[0];const k=Number.parseInt(L[1],10);let o;let e;let n=Math.ceil(k/1e3);const M='<span class="countdown"> ('+n+")</span>";if(B==="confirm"){e=p.querySelector("#xq-bs-modal-confirm");j(e,M)}else{e=p.querySelector("#xq-bs-modal-cancel");j(e,M)}s.addEventListener("show.bs.modal",()=>{o=setInterval(function(){const t=e.querySelector(".countdown");n=n-1;t.innerHTML=" ("+n+") ";if(n<=0){clearInterval(o);e.click()}},1e3)})}}f.show()}else{console.log("error","the bootstrap not loaded!")}}};var a=(t={})=>{s(t)};window.xqConfirm=a;var c=a})();