弹窗与提示
弹窗和提示是重要的交互元素，用于获取用户确认、展示信息或提供额外功能。
弹窗类型
| 类型 | 用途 | 特点 |
|---|---|---|
| 确认框 | 获取用户确认操作 | 包含确认/取消按钮 |
| 提示框 | 展示重要信息 | 通常只有一个确认按钮 |
| 模态框 | 展示复杂内容或表单 | 阻止用户与背景交互 |
| 通知 | 非阻塞式信息提醒 | 自动消失，不影响用户操作 |
最佳实践
适度使用
避免过度使用打断用户流程
清晰文案
使用明确简洁的提示文字
便捷关闭
提供多种关闭方式
键盘支持
支持ESC键关闭等功能
弹窗实现方式
原生JavaScript
直接操作DOM创建和管理弹窗
// HTML:
<div id="modal" class="modal-overlay hidden">
<div class="modal-content">
<h3>确认操作</h3>
<p>您确定要执行此操作吗？</p>
<button id="confirmBtn">确认</button>
<button id="cancelBtn">取消</button>
<span id="closeModal" class="close">×</span>
</div>
</div>
// JavaScript:
const modal = document.getElementById('modal');
const confirmBtn = document.getElementById('confirmBtn');
const cancelBtn = document.getElementById('cancelBtn');
const closeModal = document.getElementById('closeModal');
// 显示模态框
function showModal() {
modal.classList.remove('hidden');
document.body.style.overflow = 'hidden'; // 防止背景滚动
}
// 隐藏模态框
function hideModal() {
modal.classList.add('hidden');
document.body.style.overflow = '';
}
// 事件监听
confirmBtn.addEventListener('click', function() {
// 执行确认操作
hideModal();
});
cancelBtn.addEventListener('click', hideModal);
closeModal.addEventListener('click', hideModal);
// 点击背景关闭
modal.addEventListener('click', hideModal);
// 阻止内容区域点击关闭
document.querySelector('.modal-content').addEventListener('click', stopPropagation);
// ESC键关闭
document.addEventListener('keydown', handleEscapeKey);
function handleEscapeKey(event) {
if (event.key === 'Escape' && !modal.classList.contains('hidden')) {
hideModal();
}
}
Vue.js实现
使用组件化方式管理弹窗状态
<!-- Vue模板 -->
<template>
<div>
<button @click="showModal = true">打开弹窗</button>
<div v-if="showModal" class="modal-overlay" @click="closeModal">
<div class="modal-content" @click.stop>
<h3>{{ modalTitle }}</h3>
<p>{{ modalMessage }}</p>
<div class="modal-actions">
<button @click="confirmAction" class="btn-confirm">{{ confirmText }}</button>
<button @click="closeModal" class="btn-cancel">{{ cancelText }}</button>
</div>
<span class="close" @click="closeModal">×</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
modalTitle: '确认操作',
modalMessage: '您确定要执行此操作吗？',
confirmText: '确认',
cancelText: '取消'
}
},
mounted() {
// 监听ESC键
document.addEventListener('keydown', this.handleEscape);
},
beforeDestroy() {
document.removeEventListener('keydown', this.handleEscape);
},
methods: {
closeModal() {
this.showModal = false;
},
confirmAction() {
// 执行确认操作
this.$emit('confirmed');
this.closeModal();
},
handleEscape(event) {
if (event.key === 'Escape' && this.showModal) {
this.closeModal();
}
}
}
}
</script>
<style>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
position: relative;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.close {
position: absolute;
top: 10px;
right: 15px;
cursor: pointer;
font-size: 24px;
}
</style>