Javascript ThymileAF片段-确认对话框的html模式

我有一个确认对话框，它在一些页面上重新出现，所以我想我可以为它制作一个thymeleaf片段

我创建了一个新的html页面modal.html和一个包含modal的div：

<div th:fragment="confirm">
    <div id="confirm" class="modal fade" role="dialog">
       <div class="modal-dialog">
           <!-- Modal content-->
           <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Please confirm</h4>
               </div>
               <div class="modal-body">
                   <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                   <a id="btn-confirm" class="btn btn-primary pull-right">Confirm</a>
               </div>
           </div>
       </div>
   </div>
</div>

然后我把它像这样写在页面上：

<div th:include="fragments/modal :: confirm"></div>

这种语法适用于我的标题。 问题是它现在一直可见。 当我在页面上直接包含相同的模式代码时，它只有在切换时才会弹出

有人能帮我吗？ 谢谢

模态CSS类具有display:none；，所以默认情况下它是隐藏的

包含片段的div可能位于一个元素中，该元素具有一个CSS类，该类将设置为与无不同的值，并覆盖模式CSS类

检查开发人员扩展F12中元素的样式，查看哪些内容覆盖了显示属性

确保你包括

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>

---

您有数据切换=模式数据目标=确认按钮吗？是的，我有一个属性为data toggle=模式和data target=确认的按钮。然后您应该比较渲染的工作解决方案和渲染的片段解决方案。