mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
160 lines
4.7 KiB
160 lines
4.7 KiB
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: '<textarea id="reply" style="width:100%;height:200px;"></textarea>',
|
|
// showOk: true,
|
|
// onOkClick: function() {
|
|
// var reply = document.getElementById('reply').value;
|
|
// if (reply == '') {
|
|
// showModal({
|
|
// titleText: '提示',
|
|
// content: '回复内容不能为空',
|
|
// showOk: true
|
|
// })
|
|
// return false; // 阻止关闭模态框
|
|
// }
|
|
// }
|
|
// });
|
|
// }, 2000);
|