<div class="right aligned column"> <a href="#" th:href="@{/message/delete/{messageType}(messageType=${messageType})}" class="ui m-inline-block m-text-thin"> <i class="trash icon"></i>清空所有消息</a> </div> 如何给以上代码提交提示框,让删除的时候会有提示消息,让用户确认是否真的要删除
时间: 2023-08-05 10:07:32 浏览: 48
您可以使用 Semantic UI 中的 `modal` 组件来添加一个确认删除的提示框,如下所示:
```
<div class="right aligned column">
<a href="#" th:href="@{/message/delete/{messageType}(messageType=${messageType})}" class="ui m-inline-block m-text-thin">
<i class="trash icon"></i>
<span class="text">清空所有消息</span>
</a>
<div class="ui small modal">
<div class="header">确认删除</div>
<div class="content">
<p>您确定要清空所有消息吗?</p>
</div>
<div class="actions">
<div class="ui negative button">取消</div>
<a href="#" th:href="@{/message/delete/{messageType}(messageType=${messageType})}" class="ui positive button">确定</a>
</div>
</div>
</div>
```
在上面的示例中,我们在 `<div class="right aligned column">` 中添加了一个 `modal` 组件,其中包含一个确认删除的提示框。当用户点击清空所有消息的链接时,提示框会显示出来,询问用户是否确认删除。用户可以选择取消或确认删除操作。
您可以根据需要调整提示框的样式和内容。