JS写一个弹窗消息提醒插件

制作一个原生JavaScript的弹窗消息提醒插件可以分为以下几个步骤：创建HTML结构、添加样式、编写JavaScript代码。下面是一个基本的示例：

HTML

首先，创建一个基础的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup Plugin Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="show-popup-btn">Show Popup</button>
    <div id="popup" class="popup hidden">
        <div class="popup-content">
            <span id="close-popup" class="close">&times;</span>
            <p>This is a popup message!</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

为弹窗添加样式：

/* styles.css */
.hidden {
    display: none;
}

.popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.popup-content {
    position: relative;
}

.close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
}

JavaScript

编写JavaScript代码来控制弹窗的显示和隐藏：

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const showPopupBtn = document.getElementById('show-popup-btn');
    const popup = document.getElementById('popup');
    const closePopup = document.getElementById('close-popup');

    showPopupBtn.addEventListener('click', () => {
        popup.classList.remove('hidden');
    });

    closePopup.addEventListener('click', () => {
        popup.classList.add('hidden');
    });

    window.addEventListener('click', (event) => {
        if (event.target === popup) {
            popup.classList.add('hidden');
        }
    });
});

解释

  1. HTML部分：
    • 包含一个按钮，当点击按钮时显示弹窗。
    • 弹窗内容包含一个关闭按钮和一条消息。
  2. CSS部分：
    • hidden类用于控制弹窗的显示和隐藏。
    • popup类设置了弹窗的位置、大小和样式。
    • popup-content类用于定位弹窗内容。
    • close类用于设置关闭按钮的位置和样式。
  3. JavaScript部分：
    • 当DOM内容加载完成后，选择按钮和弹窗元素。
    • 为显示弹窗按钮添加点击事件监听器，点击时移除hidden类以显示弹窗。
    • 为关闭按钮添加点击事件监听器，点击时添加hidden类以隐藏弹窗。
    • 为窗口添加点击事件监听器，点击弹窗外部区域时隐藏弹窗。

这个示例展示了如何用原生JavaScript创建一个简单的弹窗消息提醒插件。

JavaScript

使用JS制作一个选项卡 切换显示不同内容

上一篇

JavaScript

Javascript示例-使用原生JS实现网页轮播图效果

下一篇

猜你喜欢

JS获取昨天的年月日

0211