let currentZIndex = 1000; // 初始 z-index 值 // 动态生成模态对话框的 HTML 结构 function createModal() { const modal = document.createElement('div'); modal.className = 'modal'; modal.id = `modal-${currentZIndex}`; // 添加唯一 ID const modalContent = document.createElement('div'); modalContent.className = 'modal-content'; const closeBtn = document.createElement('span'); closeBtn.className = 'modal-close'; closeBtn.innerHTML = '×'; const title = document.createElement('h2'); title.id = 'modal-title'; const contentContainer = document.createElement('div'); contentContainer.id = 'modal-content-container'; const btnGroup = document.createElement('div'); btnGroup.className = 'modal-button-group'; const okButton = document.createElement('button'); okButton.id = 'ok-button'; okButton.className = 'modal-button modal-button-ok'; okButton.textContent = '确定'; const cancelButton = document.createElement('button'); cancelButton.id = 'cancel-button'; cancelButton.className = 'modal-button modal-button-cancel'; cancelButton.textContent = '取消'; modalContent.appendChild(closeBtn); modalContent.appendChild(title); modalContent.appendChild(contentContainer); btnGroup.appendChild(okButton); btnGroup.appendChild(cancelButton); modalContent.appendChild(btnGroup); modal.appendChild(modalContent); // 设置初始 z-index modal.style.zIndex = currentZIndex; return modal; } // 显示模态对话框 function showModal(options) { const modal = createModal(); document.body.appendChild(modal); const title = modal.querySelector('#modal-title'); const contentContainer = modal.querySelector('#modal-content-container'); const okButton = modal.querySelector('#ok-button'); const cancelButton = modal.querySelector('#cancel-button'); title.textContent = options.titleText || '标题'; // 清空旧的内容 while (contentContainer.firstChild) { contentContainer.removeChild(contentContainer.firstChild); } // 插入内容或自定义 HTML if (options.contentText) { const content = document.createElement('p'); content.textContent = options.contentText; contentContainer.appendChild(content); } else if (options.contentHtml) { contentContainer.innerHTML = options.contentHtml; } if (!options.showOk) { okButton.style.display = "none"; } else { okButton.style.display = "block"; } if (!options.showCancel) { cancelButton.style.display = "none"; } else { cancelButton.style.display = "block"; } // 关闭模态对话框 function closeModal() { modal.remove(); } // 当用户点击关闭按钮时 const closeBtn = modal.querySelector('.modal-close'); closeBtn.onclick = function() { closeModal(); } // 当用户点击确定按钮时 okButton.onclick = function() { if (typeof options.onOkClick === 'function') { const shouldClose = options.onOkClick(); if (shouldClose !== false) { closeModal(); } } else { closeModal(); } } // 当用户点击取消按钮时 cancelButton.onclick = function() { if (typeof options.onCancelClick === 'function') { options.onCancelClick(); } closeModal(); } // 当用户点击模态对话框外部时 modal.onclick = function(event) { if (event.target === modal) { closeModal(); } } // 更新当前最高的 z-index currentZIndex++; } // 示例: 调用 showModal 函数并传递确定和取消按钮的回调函数 // showModal({ // titleText: '提示', // content: '你确定要继续吗?', // showOk: true, // showCancel: true, // onOkClick: function() { // alert('您点击了确定按钮'); // }, // onCancelClick: function() { // alert('您点击了取消按钮'); // } // }); // 创建第二个模态框 // setTimeout(function() { // showModal({ // titleText: '回复', // contentHtml: '', // showOk: true, // onOkClick: function() { // var reply = document.getElementById('reply').value; // if (reply == '') { // showModal({ // titleText: '提示', // content: '回复内容不能为空', // showOk: true // }) // return false; // 阻止关闭模态框 // } // } // }); // }, 2000);