According to the Thymeleaf documentation, it is recommended to utilize a popup div instead of a JavaScript alert:
An illustration of a reusable alert fragment using layout:fragment
(task/alert.html) is as follows:
<!DOCTYPE html>
<html>
<body>
<th:block layout:fragment="alert-content">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</p>
<p>
<button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</th:block>
</body>
</html>
The invocation of the above fragment may appear as below
(task/list.html):
<div layout:insert="~{task/alert :: alert}" th:with="type='info', header='Info'" th:remove="tag">
<!--/* Implements alert content fragment with simple content */-->
<th:block layout:fragment="alert-content">
<p><em>This is a simple list of tasks!</em></p>
</th:block>
</div>
Alternatively:
<div layout:insert="~{task/alert :: alert}" th:with="type='danger', header='Oh snap! You got an error!'" th:remove="tag">
<!--/* Implements alert content fragment with full-blown HTML content */-->
<th:block layout:fragment="alert-content">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</p>
<p>
<button type="button" class="btn btn-danger">
Take this action</button>
<button type="button" class="btn btn-default">
Or do this</button>
</p>
</th:block>
</div>
In this instance, the complete alert-content of task/alert
(/WEB-INF/views/task/alert.html) template will be substituted by customized
HTML provided above.
Hence, the example in the original post could resemble the following:
<div layout:insert="~{task/alert :: alert}" th:with="type='info', header='lalala'" th:remove="tag">
<th:block layout:fragment="alert-content">
<p>La la la</p>
</th:block>
</div>