JavaScript实现多种弹窗效果实战详解(实现方法)

// 示例：最简弹窗显示逻辑
function showPopup() {
  const popup = document.createElement('div');
  popup.textContent = '欢迎使用JS弹窗！';
  popup.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:white;padding:20px;border:1px solid #ccc;z-index:1000;';
  document.body.appendChild(popup);
}

alert("操作成功！");

alert(42);           // 显示 "42"
alert(true);         // 显示 "true"
alert([1,2,3]);      // 显示 "1,2,3"
alert({});           // 显示 "[object Object]"

try {
    riskyOperation();
} catch (error) {
    alert("系统出现异常：" + error.message);
}

const shouldDelete = confirm("您确定要删除这条记录吗？");
if (shouldDelete) {
    deleteRecord();
} else {
    console.log("用户已取消删除操作");
}

async function handleDelete() {
    const confirmed = confirm("即将永久删除文件，是否继续？");
    if (confirmed) {
        await fetch("/api/delete", { method: "POST" });
        alert("删除成功！");
    }
}

<form id="profileForm">
    <input type="text" name="username" required />
    <button type="submit">保存资料</button>
</form>
<script>
document.getElementById('profileForm').addEventListener('submit', function(e) {
    const username = this.username.value.trim();
    if (!username) {
        alert("用户名不能为空，请填写后再提交！");
        e.preventDefault(); // 阻止表单提交
        return;
    }
    const isConfirmed = confirm("确认提交当前信息？");
    if (!isConfirmed) {
        e.preventDefault(); // 用户取消提交
    }
});
</script>

function createDeleteButton(itemId) {
    const button = document.createElement("button");
    button.textContent = "删除";
    button.addEventListener("click", function() {
        const result = confirm(`确定要删除编号为 ${itemId} 的条目吗？\n此操作不可撤销。`);
        if (result) {
            fetch(`/api/items/${itemId}`, { method: "DELETE" })
                .then(res => res.json())
                .then(data => {
                    alert("删除成功！");
                    location.reload(); // 刷新页面更新列表
                })
                .catch(err => {
                    alert("删除失败：" + err.message);
                });
        } else {
            console.log("用户取消删除");
        }
    });
    return button;
}

graph TD
    A[用户访问网页] --> B{触发alert()}
    B --> C[浏览器绘制原生弹窗]
    C --> D[样式与页面脱节]
    D --> E[破坏品牌一致性]
    E --> F[降低专业感]

console.log("Step 1");
alert("Pause here...");
console.log("Step 2"); // 只有关闭弹窗后才会执行

let counter = 0;
const interval = setInterval(() => {
    console.log(`Tick ${++counter}`);
}, 1000);

alert("Wait...");
clearInterval(interval); // 实际上，interval 已错过多个周期

.custom-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
    .custom-modal {
        width: 90vw;
        max-height: 80vh;
        overflow-y: auto;
    }
}

<div class="modal" id="customModal">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">标题区域</div>
    <div class="modal-body">主体内容</div>
    <div class="modal-footer">操作按钮组</div>
  </div>
</div>

<div class="modal" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
  <div class="modal-overlay" tabindex="-1"></div>
  <div class="modal-container" style="width: 500px;">
    <header class="modal-header">
      <h3 id="modalTitle">用户信息编辑</h3>
      <button class="modal-close-btn" aria-label="关闭">&times;</button>
    </header>
    <main class="modal-body">
      <p>请填写以下信息：</p>
      <form>
        <label>姓名：<input type="text" name="name" /></label><br />
        <label>邮箱：<input type="email" name="email" /></label>
      </form>
    </main>
    <footer class="modal-footer">
      <button type="button" class="btn-cancel">取消</button>
      <button type="button" class="btn-confirm">确认提交</button>
    </footer>
  </div>
</div>

.sidebar {
  position: relative;
  width: 250px;
  height: 100vh;
}
.sidebar-ad-modal {
  position: absolute;
  top: 60px;
  right: -260px; /* 初始隐藏在右侧外 */
  width: 240px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
  padding: 15px;
  transition: right 0.3s ease;
}
.sidebar:hover .sidebar-ad-modal {
  right: 0; /* 鼠标悬停时滑入 */
}

graph TD
    A[用户进入商品页] --> B{鼠标是否悬停侧边栏?}
    B -- 是 --> C[触发CSS transition]
    C --> D[ad-modal从右滑入]
    D --> E[展示促销信息]
    B -- 否 --> F[保持隐藏状态]

.toast-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  max-width: 300px;
  background-color: #333;
  color: white;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: slideInUp 0.3s ease-out;
}
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

function showToast(message) {
  const toast = document.createElement('div');
  toast.className = 'toast-notification';
  toast.textContent = message;
  document.body.appendChild(toast);
  setTimeout(() => {
    toast.remove();
  }, 3000); // 3秒后自动销毁
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}
.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1010;
  background: white;
  border-radius: 8px;
}

graph LR
    A[触发show()方法] --> B[创建或显示.modal-overlay]
    B --> C[显示.modal-container]
    C --> D[禁用body滚动]
    D --> E[监听esc键或点击遮罩关闭]
    E --> F[调用hide()恢复状态]

.modal {
  display: none; /* 默认隐藏 */
}

.modal.active {
  display: block;
}

const modal = document.getElementById('customModal');
function showModal() {
  modal.classList.add('active');
  document.body.style.overflow = 'hidden'; // 锁定滚动
}
function hideModal() {
  modal.classList.remove('active');
  document.body.style.overflow = ''; // 恢复滚动
}
// 点击遮罩关闭
document.querySelector('.modal-overlay').addEventListener('click', hideModal);
// ESC关闭
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') hideModal();
});

.modal-container {
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 8px 24px -4px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
}

@media (max-width: 768px) {
  .modal-container {
    width: 90vw;
    max-width: none;
    top: 20px;
    left: 5%;
    transform: translateY(0); /* 放弃垂直居中微调 */
    border-radius: 12px 12px 0 0;
    bottom: 0;
    margin: 0;
    position: fixed;
  }
}

let isDragging = false;
let offsetX, offsetY;
headerElement.addEventListener('mousedown', function(e) {
    isDragging = true;
    const rect = modalElement.getBoundingClientRect();
    offsetX = e.clientX - rect.left;  // 鼠标距弹窗左边的距离
    offsetY = e.clientY - rect.top;   // 鼠标距弹窗上边的距离
    document.body.style.userSelect = 'none'; // 禁止文本选中
});

flowchart TD
    A[用户点击弹窗标题栏] --> B{是否为 mousedown?}
    B -- 是 --> C[记录当前鼠标 clientX/Y]
    C --> D[获取弹窗 getBoundingClientRect()]
    D --> E[计算 offsetX = clientX - rect.left]
    E --> F[计算 offsetY = clientY - rect.top]
    F --> G[设置 isDragging = true]
    G --> H[禁止 body 文本选中]

document.addEventListener('mousemove', function(e) {
    if (!isDragging) return;
    const newX = e.clientX - offsetX;
    const newY = e.clientY - offsetY;
    // 边界限制：防止弹窗移出屏幕
    const maxX = window.innerWidth - modalElement.offsetWidth;
    const maxY = window.innerHeight - modalElement.offsetHeight;
    const boundedX = Math.max(0, Math.min(newX, maxX));
    const boundedY = Math.max(0, Math.min(newY, maxY));
    modalElement.style.left = `${boundedX}px`;
    modalElement.style.top = `${boundedY}px`;
});

document.addEventListener('mouseup', function() {
    if (isDragging) {
        isDragging = false;
        document.body.style.userSelect = ''; // 恢复文本选择
    }
});

<div class="modal">
    <div class="modal-header">
        <span class="close-btn">&times;</span>
        <h3>提示信息</h3>
    </div>
    <div class="modal-body">这里是内容...</div>
</div>

closeBtn.addEventListener('click', function(e) {
    e.stopPropagation(); // 防止事件冒泡至父级（如遮罩层）
    hideModal();         // 调用统一隐藏函数
});

function hideModal() {
    modalElement.classList.add('fade-out');
    setTimeout(() => {
        modalElement.style.display = 'none';
        modalElement.classList.remove('fade-out');
    }, 300); // 匹配CSS过渡时间
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && modalElement.style.display !== 'none') {
        hideModal();
    }
});

setTimeout(() => {
    showModal(); // 显示弹窗
}, 3000); // 3秒后执行

if (document.visibilityState === 'visible') {
    setTimeout(showModal, 3000);
} else {
    // 页面不可见时不弹出
}

let countdown = 5;
const timerDisplay = document.getElementById('countdown');
function startCountdown() {
    const intervalId = setInterval(() => {
        countdown--;
        timerDisplay.textContent = countdown;
        if (countdown <= 0) {
            clearInterval(intervalId);
            hideModal();
        }
    }, 1000);
}

flowchart LR
    A[启动倒计时] --> B[设置初始值 countdown=5]
    B --> C[每1秒执行一次]
    C --> D[显示当前 countdown 数字]
    D --> E{countdown ≤ 0?}
    E -- 否 --> C
    E -- 是 --> F[清除定时器]
    F --> G[调用 hideModal()]

function showModal() {
    const scrollPosition = window.pageYOffset;
    modalElement.style.display = 'block';
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.body.style.top = `-${scrollPosition}px`;
}

let preventScroll = (e) => e.preventDefault();
modalElement.addEventListener('show', () => {
    document.addEventListener('touchmove', preventScroll, { passive: false });
});

function hideModal() {
    const scrollPosition = parseInt(document.body.style.top || '0') * -1;
    modalElement.style.display = 'none';
    document.body.style.overflow = '';
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.width = '';
    window.scrollTo(0, scrollPosition);
}

function centerModal(modalElement) {
    const rect = modalElement.getBoundingClientRect();
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    const left = scrollLeft + (viewportWidth - rect.width) / 2;
    const top = scrollTop + (viewportHeight - rect.height) / 2;
    modalElement.style.position = 'absolute';
    modalElement.style.left = `${left}px`;
    modalElement.style.top = `${top}px`;
}

function safePositionModal(modalElement, options = {}) {
    const { maxHeight = 0.8, maxWidth = 0.9 } = options;
    const rect = modalElement.getBoundingClientRect();
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    // 限制最大宽高
    if (rect.height > viewportHeight * maxHeight) {
        modalElement.style.height = `${viewportHeight * maxHeight}px`;
        modalElement.style.overflowY = 'auto';
    }
    if (rect.width > viewportWidth * maxWidth) {
        modalElement.style.width = `${viewportWidth * maxWidth}px`;
        modalElement.style.overflowX = 'auto';
    }
    // 重新获取调整后的尺寸
    const newRect = modalElement.getBoundingClientRect();
    let left = (viewportWidth - newRect.width) / 2;
    let top = (viewportHeight - newRect.height) / 2;
    // 边界校正
    if (top < 0) top = 10;
    if (left < 0) left = 10;
    modalElement.style.position = 'fixed';
    modalElement.style.left = `${left}px`;
    modalElement.style.top = `${top}px`;
}

graph TD
    A[开始定位弹窗] --> B{获取元素尺寸}
    B --> C[比较高度与视口]
    C -->|超出| D[设置maxHeight + overflow-y]
    C -->|正常| E[继续]
    D --> F[重新获取尺寸]
    E --> F
    F --> G[计算居中left/top]
    G --> H{是否小于0?}
    H -->|是| I[设为最小边距]
    H -->|否| J[保持原值]
    I --> K[应用style定位]
    J --> K
    K --> L[结束]

.modal {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
    visibility: hidden;
    position: fixed;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.show {
    opacity: 1;
    transform: scale(1) translateY(0);
    visibility: visible;
}

function showModal(modal) {
    modal.classList.remove('show');
    void modal.offsetWidth; // 强制重排，确保从初始状态开始
    modal.style.display = 'block';
    requestAnimationFrame(() => {
        modal.classList.add('show');
    });
}
function hideModal(modal) {
    modal.classList.remove('show');
    setTimeout(() => {
        modal.style.display = 'none';
    }, 300); // 匹配CSS transition时间
}

/* 推荐使用的标准缓动 */
.transition-standard {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
.animated-modal {
    animation: none;
}
.animated-modal.enter {
    animation: bounce-in 0.5s forwards;
}

function playEntranceAnimation(element, animationClass) {
    element.classList.remove(animationClass);
    void element.offsetWidth; // 重置动画状态
    element.classList.add(animationClass);
}

// 示例：按步骤展示多步弹窗
const steps = ['step1-slide-in', 'step2-fade-up', 'step3-pop'];
let currentStep = 0;
function nextStep() {
    if (currentStep >= steps.length) return;
    modal.classList.remove(steps[currentStep - 1]);
    modal.classList.add(steps[currentStep]);
    currentStep++;
}

flowchart LR
    Start --> AddClass[添加动画类名]
    AddClass --> Trigger[浏览器检测样式变化]
    Trigger --> StyleCalc[样式计算]
    StyleCalc --> Layout[布局（可选）]
    Layout --> Paint[绘制]
    Paint --> Composite[合成层更新]
    Composite --> Animation[动画播放]

let animationId;
function animateModalFollowMouse(e) {
    const modal = document.getElementById('follow-modal');
    function update() {
        modal.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
    }
    cancelAnimationFrame(animationId);
    animationId = requestAnimationFrame(update);
}
document.addEventListener('mousemove', animateModalFollowMouse);

for (let i = 0; i < items.length; i++) {
    items[i].style.left = box.offsetLeft + 10 + 'px'; // 每次读取都会重排
}

const cachedLeft = box.offsetLeft; // 单次读取
for (let i = 0; i < items.length; i++) {
    items[i].style.left = (cachedLeft + 10) + 'px'; // 复用缓存值
}

class CustomModal {
    constructor(options = {}) {
        // 默认配置
        this.config = {
            title: '提示',
            content: '这是一条消息',
            showClose: true,
            autoClose: null, // 自动关闭时间（毫秒）
            onShow: null,
            onHide: null,
            ...options
        };
        this.isOpen = false;
        this.modalElement = null;
        this.overlayElement = null;
        this.init();
    }
    init() {
        this.createDOM();
        this.bindEvents();
        this.applyStyles();
    }
    createDOM() {
        // 创建遮罩层
        this.overlayElement = document.createElement('div');
        this.overlayElement.className = 'modal-overlay';
        // 创建弹窗主体
        this.modalElement = document.createElement('div');
        this.modalElement.className = 'custom-modal';
        const header = document.createElement('div');
        header.className = 'modal-header';
        header.innerHTML = `<h3>${this.config.title}</h3>`;
        if (this.config.showClose) {
            const closeBtn = document.createElement('span');
            closeBtn.className = 'close-btn';
            closeBtn.innerHTML = '&times;';
            closeBtn.onclick = () => this.hide();
            header.appendChild(closeBtn);
        }
        const body = document.createElement('div');
        body.className = 'modal-body';
        body.textContent = this.config.content;
        const footer = document.createElement('div');
        footer.className = 'modal-footer';
        footer.innerHTML = '<button class="confirm-btn">确定</button>';
        footer.querySelector('.confirm-btn').onclick = () => this.hide();
        this.modalElement.appendChild(header);
        this.modalElement.appendChild(body);
        this.modalElement.appendChild(footer);
        this.overlayElement.appendChild(this.modalElement);
        document.body.appendChild(this.overlayElement);
    }
    bindEvents() {
        // ESC 关闭
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this.isOpen) this.hide();
        });
        // 点击遮罩关闭
        this.overlayElement.addEventListener('click', (e) => {
            if (e.target === this.overlayElement) this.hide();
        });
    }
    applyStyles() {
        Object.assign(this.overlayElement.style, {
            position: 'fixed',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%',
            backgroundColor: 'rgba(0,0,0,0.5)',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            zIndex: 1000
        });
        Object.assign(this.modalElement.style, {
            backgroundColor: '#fff',
            borderRadius: '8px',
            padding: '20px',
            minWidth: '300px',
            maxWidth: '90vw',
            boxShadow: '0 4px 20px rgba(0,0,0,0.3)'
        });
    }
    show() {
        if (this.isOpen) return;
        this.overlayElement.style.display = 'flex';
        this.isOpen = true;
        // 触发动画或回调
        if (typeof this.config.onShow === 'function') {
            this.config.onShow.call(this);
        }
        // 自动关闭定时器
        if (this.config.autoClose) {
            setTimeout(() => this.hide(), this.config.autoClose);
        }
    }
    hide() {
        if (!this.isOpen) return;
        this.overlayElement.style.display = 'none';
        this.isOpen = false;
        if (typeof this.config.onHide === 'function') {
            this.config.onHide.call(this);
        }
    }
    destroy() {
        if (this.overlayElement && this.overlayElement.parentNode) {
            this.overlayElement.parentNode.removeChild(this.overlayElement);
        }
        this.modalElement = null;
        this.overlayElement = null;
    }
}

$.fn.customModal = function(options) {
    const settings = $.extend({
        animation: 'fade', // 支持 fade/slide
        speed: 300
    }, options);
    return this.each(function() {
        const $trigger = $(this);
        const $modal = $($trigger.data('target'));
        $trigger.on('click', function(e) {
            e.preventDefault();
            if (settings.animation === 'fade') {
                $modal.fadeIn(settings.speed);
            } else if (settings.animation === 'slide') {
                $modal.slideDown(settings.speed);
            }
            $('body').css('overflow', 'hidden'); // 锁定滚动
        });
        $modal.find('.close, .cancel-btn').on('click', function() {
            $modal.hide();
            $('body').css('overflow', 'auto');
        });
    });
};

<button data-target="#myModal">打开弹窗</button>
<div id="myModal" style="display:none;">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>欢迎使用jQuery弹窗插件！</p>
        <button class="cancel-btn">取消</button>
    </div>
</div>
<script>
    $('button[data-target]').customModal({ animation: 'slide', speed: 400 });
</script>