一、JS自定义弹出框
JS自定义弹出框是网页制作中一个重要的组件，通常用于在页面中间显示一段消息或者用户需要填写一些内容的时候。可以使用JS来动态生成一个弹出框，既可以根据需要来修改弹窗的样式、大小，也可以在弹窗中添加任意需要的元素
下面是一组JS自定义弹出框的示例代码：
// HTML模板，可按需修改
let html = `
${title}
${content}
`;
// 创建DOM节点
let popup = document.createElement('div');
popup.innerHTML = html;
// 添加弹窗样式（可按需修改）
popup.style.position = 'absolute';
popup.style.top = '50%';
popup.style.left = '50%';
popup.style.transform = 'translate(-50%, -50%)';
popup.style.padding = '10px';
popup.style.border = '1px solid #ccc';
popup.style.background = '#fff';
// 添加事件处理函数（可按需修改）
let confirmBtn = popup.querySelector('#popup-confirm');
confirmBtn.addEventListener('click', () => {
// 执行确认操作
});
let cancelBtn = popup.querySelector('#popup-cancel');
cancelBtn.addEventListener('click', () => {
// 执行取消操作
});
// 添加到页面中
document.body.appendChild(popup);
上面的代码中，HTML模板用于生成弹窗的DOM节点，可以修改弹窗的标题、内容、按钮等元素。创建节点后，可以自定义弹窗的样式，例如居中显示、设置边框颜色等。最后，通过添加确定与取消的事件处理函数，来处理弹窗中的按钮点击事件。
二、JS弹出自定义对话框
JS弹出自定义对话框是一种常见的场景，通常用于用户进行确认、提醒等操作，其特点是在用户进行操作前会出现一个提示信息，用户需要点击确认或者取消才能继续进行操作。
下面是一组JS弹出自定义对话框的示例代码：
// HTML模板，可按需修改
let html = `
${title}
${content}
`;
// 创建DOM节点
let dialog = document.createElement('div');
dialog.innerHTML = html;
// 添加对话框样式（可按需修改）
dialog.style.position = 'fixed';
dialog.style.top = '0';
dialog.style.left = '0';
dialog.style.width = '100%';
dialog.style.height = '100%';
dialog.style.zIndex = '9999';
dialog.style.background = 'rgba(0,0,0,0.5)';
dialog.style.display = 'flex';
dialog.style.justifyContent = 'center';
dialog.style.alignItems = 'center';
// 添加事件处理函数（可按需修改）
let confirmBtn = dialog.querySelector('#dialog-confirm');
confirmBtn.addEventListener('click', () => {
// 执行确认操作
document.body.removeChild(dialog);
});
let cancelBtn = dialog.querySelector('#dialog-cancel');
cancelBtn.addEventListener('click', () => {
// 执行取消操作
document.body.removeChild(dialog);
});
// 添加到页面中
document.body.appendChild(dialog);
在上述代码中，HTML模板中新增了一个遮罩层，用于防止用户在未处理完弹窗的情况下进行操作。创建节点后，需要定义对话框和遮罩层的样式。最后，通过添加确认和取消事件处理函数，在用户点击对话框中的按钮时执行相应操作，并且移除对话框和遮罩层。
三、JS自定义弹窗
JS自定义弹窗是指可以自由设置弹窗内容和弹窗样式的一类组件。可以通过设置弹窗的HTML、CSS样式和JS脚本，来实现自定义弹窗的效果。
下面是一组JS自定义弹窗的示例代码：
// HTML模板，可按需修改
let html = `
${title}
${content}
`;
// 创建DOM节点
let modal = document.createElement('div');
modal.innerHTML = html;
// 添加弹窗样式（可按需修改）
modal.style.position = 'fixed';
modal.style.top = '50%';
modal.style.left = '50%';
modal.style.transform = 'translate(-50%, -50%)';
modal.style.padding = '10px';
modal.style.border = '1px solid #ccc';
modal.style.background = '#fff';
// 添加事件处理函数（可按需修改）
let closeBtn = modal.querySelector('#modal-close');
closeBtn.addEventListener('click', () => {
// 执行关闭操作
document.body.removeChild(modal);
});
// 添加到页面中
document.body.appendChild(modal);
在上述代码中，HTML模板可以任意修改，用于自定义弹窗的样式和内容。创建节点后，可以自定义弹窗的样式，例如居中显示、设置边框颜色等。最后，通过添加关闭事件处理函数，在用户点击关闭按钮时移除弹窗。
