当前位置：首页 > 行业动态 > 正文

Bootstrap编写一个在当前网页弹出可关闭的对话框非弹窗

admin
行业动态
2025-04-11
4

使用Bootstrap创建可关闭的对话框可通过模态框组件实现，添加触发按钮设置data-toggle和data-target属性，定义包含modal-header、modal-body及关闭按钮的模态结构，利用data-dismiss属性控制关闭，无需额外JavaScript即可实现页面内嵌式交互弹层。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap 5 核心样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .custom-modal {
            background: rgba(0,0,0,0.5);
            transition: opacity 0.3s;
        }
        .modal-content {
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.15);
            border: none;
        }
        .modal-header {
            background: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            border-radius: 12px 12px 0 0;
            padding: 16px 24px;
        }
        .modal-body {
            line-height: 1.6;
            color: #444;
            padding: 24px;
        }
        .btn-close-custom {
            position: absolute;
            right: 24px;
            top: 24px;
            width: 24px;
            height: 24px;
            opacity: 0.7;
            transition: transform 0.2s;
        }
        .btn-close-custom:hover {
            opacity: 1;
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
<!-- 模态对话框 -->
<div class="modal fade custom-modal" id="infoDialog" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <button type="button" class="btn-close btn-close-custom" 
                    data-bs-dismiss="modal" 
                    aria-label="关闭"></button>
            <div class="modal-header">
                <h5 class="modal-title fw-bold"> 重要通知</h5>
            </div>
            <div class="modal-body">
                <p>欢迎访问本网站！我们近期更新了以下服务：</p>
                <ul class="list-group list-group-flush mb-3">
                    <li class="list-group-item">️ 增强数据安全保护措施</li>
                    <li class="list-group-item">️ 优化移动端浏览体验</li>
                    <li class="list-group-item">️ 新增在线客服功能</li>
                </ul>
                <p class="text-muted small">您可随时点击右上方关闭按钮继续浏览，如需帮助请访问<a href="/help" class="text-decoration-none">帮助中心</a></p>
            </div>
        </div>
    </div>
</div>
<!-- Bootstrap 5 核心脚本 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var myModal = new bootstrap.Modal(document.getElementById('infoDialog'), {
            keyboard: false
        });
        myModal.show();
    });
</script>
</body>
</html>

实现要点解析：