如何快速创建modal，不用添加其他的库

在 Web 开发中，弹框（modal）是常见的用户界面组件，用于展示信息、提示用户或收集输入。虽然有许多 JavaScript 库和框架可以用来创建弹框，但你可以使用纯 JavaScript 和简单的 HTML/CSS 来快速实现这一功能。本文将详细介绍如何使用纯 JavaScript 创建一个弹框，并包括动态生成 CSS 样式的方法。

1. 准备工作

在创建弹框之前，你需要了解以下几个要点：

弹框的基本结构：弹框通常包括一个背景层（遮罩层）和内容层。
CSS 样式：弹框的样式决定了它的外观和布局。
JavaScript 控制：JavaScript 代码用于显示和隐藏弹框，以及处理用户交互。

2. 编写 JavaScript 代码

下面的代码示例展示了如何使用纯 JavaScript 动态创建弹框，并自动显示它。这个脚本包含了创建弹框所需的 HTML 和 CSS 样式，并在脚本运行时显示弹框。

javascript 复制代码

(function() {
    // 创建样式元素
    const style = document.createElement('style');
    style.innerHTML = `
        .pify-modal {
            display: block; /* 默认显示 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }
        .pify-modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        .pify-close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .pify-close:hover,
        .pify-close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    `;
    document.head.appendChild(style);

    // 创建 modal 元素
    const modal = document.createElement('div');
    modal.className = 'pify-modal';
    modal.id = 'pifyModal';

    const modalContent = document.createElement('div');
    modalContent.className = 'pify-modal-content';

    const closeButton = document.createElement('span');
    closeButton.className = 'pify-close';
    closeButton.innerHTML = '&times;';

    const modalText = document.createElement('p');
    modalText.innerText = 'This is a simple modal!';

    modalContent.appendChild(closeButton);
    modalContent.appendChild(modalText);
    modal.appendChild(modalContent);

    document.body.appendChild(modal);

    // 隐藏 modal 的函数
    function hideModal() {
        modal.style.display = 'none';
    }

    // 事件监听
    closeButton.onclick = function() {
        hideModal();
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            hideModal();
        }
    }

    // 直接显示弹框
    modal.style.display = 'block';
})();

3. 代码解析

3.1 创建样式

javascript 复制代码

const style = document.createElement('style');
style.innerHTML = `
    .pify-modal {
        display: block;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }
    .pify-modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }
    .pify-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    .pify-close:hover,
    .pify-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
`;
document.head.appendChild(style);

这里创建了一个 <style> 元素，并将 CSS 样式添加到页面中。样式定义了弹框的显示方式、布局和关闭按钮的外观。

3.2 创建弹框结构

javascript 复制代码

const modal = document.createElement('div');
modal.className = 'pify-modal';
modal.id = 'pifyModal';

const modalContent = document.createElement('div');
modalContent.className = 'pify-modal-content';

const closeButton = document.createElement('span');
closeButton.className = 'pify-close';
closeButton.innerHTML = '&times;';

const modalText = document.createElement('p');
modalText.innerText = 'This is a simple modal!';

modalContent.appendChild(closeButton);
modalContent.appendChild(modalText);
modal.appendChild(modalContent);

document.body.appendChild(modal);

创建了弹框和内容区域的 HTML 结构，并将其插入到 <body> 元素中。包含了一个关闭按钮和弹框内容。

3.3 控制弹框显示和隐藏

javascript 复制代码

function hideModal() {
    modal.style.display = 'none';
}

closeButton.onclick = function() {
    hideModal();
}

window.onclick = function(event) {
    if (event.target == modal) {
        hideModal();
    }
}

modal.style.display = 'block';

定义了 hideModal 函数用于隐藏弹框。
为关闭按钮和窗口点击事件添加了事件监听器，以便点击关闭按钮或弹框外部区域时隐藏弹框。
默认将弹框显示出来。

4. 运行和测试

将上述 JavaScript 代码粘贴到浏览器的开发者控制台中并执行，你会看到一个带有 pify- 前缀的弹框自动显示在页面上。点击关闭按钮或弹框外部区域将隐藏弹框。

5. 总结

使用纯 JavaScript 动态创建弹框是一个简单且有效的方式，尤其适用于不希望引入额外库或框架的场景。通过这种方法，你可以快速生成并展示弹框，并对其进行样式和功能上的自定义。希望这篇文章对你有所帮助！如果有其他问题或需要更多功能，请随时告知。

如何快速创建modal，不用添加其他的库

如何使用纯 JavaScript 快速创建弹框 (Modal)

1. 准备工作

2. 编写 JavaScript 代码

3. 代码解析

3.1 创建样式

3.2 创建弹框结构

3.3 控制弹框显示和隐藏

4. 运行和测试

5. 总结