js原生弹框多选框

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript弹框多选示例</title>
<style>/* 样式可以在这里设置，但是由于您要求只在 JavaScript 中编写弹框，所以我们将跳过此部分 */
</style>
</head>
<body><script>// 创建一个函数来显示弹框function showPopup() {// 创建弹框容器var popupContainer = document.createElement('div');popupContainer.id = 'popupContainer';popupContainer.style.position = 'fixed';popupContainer.style.top = '50%';popupContainer.style.left = '50%';popupContainer.style.transform = 'translate(-50%, -50%)';popupContainer.style.background = '#fff';popupContainer.style.padding = '20px';popupContainer.style.border = '1px solid #ccc';popupContainer.style.borderRadius = '5px';document.body.appendChild(popupContainer);// 添加取消按钮var closeButton = document.createElement('button');closeButton.textContent = '×';closeButton.style.position = 'absolute';closeButton.style.top = '5px';closeButton.style.right = '5px';closeButton.style.border = 'none';closeButton.style.background = 'transparent';closeButton.style.font = 'bold 20px Arial';closeButton.style.cursor = 'pointer';closeButton.addEventListener('click', function() {document.body.removeChild(popupContainer); // 关闭弹框});popupContainer.appendChild(closeButton);// 添加多选框var options = ['Option 1', 'Option 2', 'Option 3']; // 多选项options.forEach(function(optionText) {var label = document.createElement('label');var checkbox = document.createElement('input');checkbox.type = 'checkbox';checkbox.value = optionText;label.appendChild(checkbox);label.appendChild(document.createTextNode(optionText)); // 将文字添加到标签内popupContainer.appendChild(label);});// 添加确定按钮var confirmButton = document.createElement('button');confirmButton.textContent = '确定';confirmButton.style.display = 'block';confirmButton.style.margin = '10px auto';confirmButton.addEventListener('click', function() {var checkedOptions = Array.from(popupContainer.querySelectorAll('input[type="checkbox"]:checked')).map(function(checkbox) {return checkbox.value;});alert('您选择的选项是：' + checkedOptions.join(', '));document.body.removeChild(popupContainer); // 关闭弹框});popupContainer.appendChild(confirmButton);}// 当页面加载完成后，显示弹框window.onload = function() {showPopup();};
</script></body>
</html>