📅 最后修改于: 2023-12-03 14:59:32.372000 🧑 作者: Mango
模态框是Web应用程序中经常使用的一种设计元素。它可以在当前页面上弹出一个层，以吸引用户的注意力并提示他们采取特定的操作。
Bootstrap是一种流行的CSS框架，它包含了许多可重用的UI组件和样式，可以用来快速开发漂亮的Web应用程序。Thymeleaf是一种服务器端模板引擎，它可以将文本模板转换成HTML。
在本文中，我们将使用Bootstrap和Thymeleaf创建一个简单的模态框，以演示如何结合使用这两个工具。
首先，我们需要创建一个HTML文件，用于呈现模态框。在这个示例中，我们将使用以下的HTML代码：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Bootstrap Thymeleaf Modal Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Bootstrap Thymeleaf Modal Example</h2>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal Title</h4>
</div>
<div class="modal-body">
Modal content goes here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</div>
</body>
</html>
这个HTML代码包含了一个基本的页面结构，一个按钮用于打开模态框。模态框是使用Bootstrap的modal组件创建的。数据属性data-toggle和data-target用于打开模态框，并在按钮单击时触发modal（模态框）的显示。
Thymeleaf标记语言，能丰富我们的html文件橙，让数据填充我们的模态框内容,使用样例如下：
<div class="modal-body">
<p th:text="${modalContent.text}">Modal content goes here</p>
</div>
现在我们已经创建了一个基本的模态框和HTML文件。我们需要添加一些数据到模态框，以便在呈现时动态填充它。在本例中，我们将创建一个简单的Java对象，它有一个文本字段，用于在模态框中显示。
public class ModalContent {
private String text;
public ModalContent(String text) {
this.text = text;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
现在我们已经定义了我们的Java对象，我们可以在我们的控制器类中使用它，并传递数据到我们的HTML文件中。
在这个阶段，我们需要创建一个控制器类来处理HTTP请求并返回我们的HTML文件。在这个阶段中，我们还将包括对模态框数据的引用。
@Controller
public class ModalController {
@RequestMapping("/")
public String index(Model model) {
ModalContent modalContent = new ModalContent("This is the modal content");
model.addAttribute("modalContent", modalContent);
return "index";
}
}
我们的控制器类使用了一个@RequestMapping注解，以将根URL映射到index方法。
在方法中创建了一个ModalContent对象，并将其添加到模型中。模型可以与Thymeleaf模板集成，以填充模板上的模态框数据。
现在我们已经实现了控制器和模板文件并填充了模态框的数据。现在我们需要运行我们的应用程序以生成HTML文件并呈现模态框。
我们使用Spring Boot来运行我们的应用程序，但是请注意，您可以使用任何框架或技术来运行您的应用程序。
我们需要在我们的应用程序中添加以下的编译依赖:
dependencies {
...
compile('org.springframework.boot:spring-boot-starter-web')
...
}
启动应用程序并尝试访问 http://localhost:8080。您应该看到一个页面和一个按钮，单击按钮应该打开模态框。
通过结合使用Bootstrap和Thymeleaf，我们可以很容易地创建具有丰富交互性的Web应用程序。这是一些常用的工具，但是在正确使用它们的情况下，您可以创建高度可定制的Web应用程序。
本文旨在提供一种方法来使用Bootstrap和Thymeleaf生成模态框。请注意，这只是示例代码，可以在实际应用程序环境中进行修改和改进。