MaterializeCSS模态标头

MaterializeCSS modal header

本文关键字：模态 MaterializeCSS      更新时间：2023-09-26

我使用的是物化框架，对吧，我正试图使"模态页眉"与"模态页脚"相同。

比如，当我使用"模态页脚"时，它会在模态上创建一个块，甚至停止滚动条。

所以我复制了一些"模态页脚"的propreties，并粘贴在css上的一个新的"模态页眉"类上。

外观：

HTML:

<div id="termosdecontrato" class="modal modal-fixed-footer">
<div class="modal-header"><h4 class="centroh">Termos de contrato</h4></div>
<div class="modal-content">
<p style="text-align:justify;text-justify:inter-word;">Lorem ipsum</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Entendi</a>
</div>
</div>

CSS：

.modal {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: 70%;
  width: 55%;
  margin: auto;
  overflow-y: auto;
  border-radius: 2px;
  will-change: top, opacity; }
  @media only screen and (max-width : 992px) {
    .modal {
      width: 80%; } }
  .modal h1, .modal h2, .modal h3, .modal h4 {
    margin-top: 0; }
  .modal .modal-content {
    padding: 24px; }
  .modal .modal-close {
    cursor: pointer; }
  .modal .modal-header {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%; }
  .modal .modal-footer {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%; }
    .modal .modal-footer .btn, .modal .modal-footer .btn-large, .modal .modal-footer .btn-flat {
      float: right;
      margin: 6px 0; }
.lean-overlay {
  position: fixed;
  z-index: 999;
  top: -100px;
  left: 0;
  bottom: 0;
  right: 0;
  height: 125%;
  width: 100%;
  background: #000;
  display: none;
  will-change: opacity; }
.modal.modal-fixed-footer {
  padding: 0;
  height: 70%; }
    .modal.modal-fixed-footer .modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0; }
  .modal.modal-fixed-footer .modal-content {
    position: absolute;
    height: calc(100% - 56px);
    max-height: 100%;
    width: 100%;
    overflow-y: auto; }
  .modal.modal-fixed-footer .modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0; }

但我有这个：https://i.stack.imgur.com/5diOy.png

PS.：我过去的问题名声不好，为什么？PS²：我还不能发布图片，好吗？

模态的内容侵入标头空间的原因是因为您的"模态标头"answers"模态内容"div都处于绝对位置。

位置为"绝对"的元素相对于其容器元素放置在页面上，容器元素是包含该元素的位置最近的元素("绝对"、"相对"或"固定"(。

这意味着您的两个div只关心它们的直接父级，即"模态"div，而它们完全忽略彼此。

虽然"modal header"div上的z索引和"modal"div上新的计算高度和边距顶部将在视觉上解决问题，但建议的解决方案是将"modal header"answers"modal-content"div都更改为相对定位，然后将溢出的内容包起来，使其符合"modal-content"div的大小。

希望能有所帮助！

下面是一篇关于

问题的不错的css技巧文章

已解决，在.modal .modal-header类上添加了z-index:5。以及此：

margin-top: +56px;
height: calc(100% - 112px);

在CCD_ 3标签上。

相关文章：