thymeleaf弹窗
时间: 2023-10-13 17:22:48 浏览: 363
eclipse模板插件thymeleaf
要在 thymeleaf 中实现弹窗,可以使用 Bootstrap 中的 Modal (模态框)组件。以下是一个简单的示例:
1. 在页面中引入 Bootstrap 和 jQuery:
```
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
```
2. 在页面中添加一个触发弹窗的按钮:
```
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">弹出窗口</button>
```
3. 添加一个模态框:
```
<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">
<h4 class="modal-title" id="myModalLabel">标题</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
```
在这个示例中,当用户点击按钮时,模态框就会弹出来。您可以根据自己的需要修改模态框的内容和样式。
阅读全文