制作一个原生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">×</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');
}
});
});
解释
- HTML部分：
- 包含一个按钮，当点击按钮时显示弹窗。
- 弹窗内容包含一个关闭按钮和一条消息。
- CSS部分：
hidden类用于控制弹窗的显示和隐藏。popup类设置了弹窗的位置、大小和样式。popup-content类用于定位弹窗内容。close类用于设置关闭按钮的位置和样式。
- JavaScript部分：
- 当DOM内容加载完成后，选择按钮和弹窗元素。
- 为显示弹窗按钮添加点击事件监听器，点击时移除
hidden类以显示弹窗。 - 为关闭按钮添加点击事件监听器，点击时添加
hidden类以隐藏弹窗。 - 为窗口添加点击事件监听器，点击弹窗外部区域时隐藏弹窗。
这个示例展示了如何用原生JavaScript创建一个简单的弹窗消息提醒插件。