Question

我有一个确认对话框在某些页面上重新铺设，所以我认为我可以为它制作一个百里香的片段。

我创建了一个新的html页面（modal.html）和一个包含模态的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>

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

有人能帮助我吗？谢谢！

Answer 1

模态 CSS类有 display：none; ，所以它默认是隐藏的。

包含片段的div可能位于具有CSS类的元素内，该类将CSS display property设置为与 none 不同的内容，并覆盖模态 CSS类。

检查开发者扩展程序（F12）元素的样式，以查看覆盖显示属性的内容

并确保包含

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

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

1 个答案: