Django 显示 Bootstrap Modal 首次页面加载

在本文中，我们将介绍如何使用 Django 和 Bootstrap 结合，实现在首次页面加载时显示 Bootstrap 模态框的效果。

什么是 Bootstrap 模态框？

Bootstrap 是一个流行的前端框架，其中包含了一些用于美化网页的组件和样式。其中一个常用的组件就是模态框（Modal）。模态框是一个浮动的弹窗，它可以通过点击按钮或链接来触发，并在页面上居中显示。在本文中，我们将使用 Django 和 Bootstrap 的组合来实现在首次页面加载时显示模态框的效果。

使用 Django 创建项目

首先，我们需要使用以下命令在本地创建一个 Django 项目：

django-admin startproject myproject

然后，我们进入项目目录：

cd myproject

接下来，我们创建一个名为 myapp 的新应用程序：

python manage.py startapp myapp

然后，我们需要在 settings.py 文件中注册我们的应用程序。找到 INSTALLED_APPS 设置项，并添加 myapp：

INSTALLED_APPS = [
    ...
    'myapp',
]

设置路由

在 Django 中，我们需要设置路由来指定在哪个 URL 下显示模态框。打开 urls.py 文件并添加以下代码：

from django.urls import path
from myapp import views

urlpatterns = [
    path('', views.home, name='home'),
]

在这个例子中，我们将使用根 URL （即 http://localhost:8000/）来显示模态框。这意味着当用户访问我们的网站时，模态框将自动弹出。

创建视图函数

接下来，我们需要在 views.py 文件中创建一个视图函数来处理我们的请求。打开 views.py 文件并添加以下代码：

from django.shortcuts import render

def home(request):
    return render(request, 'home.html')

在这个例子中，我们将使用 home 函数来渲染一个名为 home.html 的模板。

创建模板

接下来，我们需要创建一个名为 home.html 的模板文件，并在其中添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Django Display Bootstrap Modal First time page loads</title>
    <!-- 引入 Bootstrap CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
    <!-- 模态框代码 -->
    <div class="modal" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Welcome to My Website</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>This is a Bootstrap modal that is displayed when the page first loads.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 Bootstrap JS 文件 -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>

    <!-- JavaScript 代码 -->
    <script type="text/javascript">
         $(document).ready(function(){$ ('#myModal').modal('show');
        });
    </script>
</body>
</html>

在这个模板中，我们引入了 Bootstrap 的 CSS 和 JS 文件，以及一个模态框的 HTML 代码。模态框的内容可以根据需要进行修改。