Question

有人知道如何让Modal适合其内容吗？当我放置宽度小于模态宽度的图像时，周围有很多未使用的空间。这是codepen https://codepen.io/hetsketch/pen/LjYvOp?editors=1100#0

<html>
<head>
  <title>Something gym related</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
  <a class="modal-trigger waves-effect waves-light btn" id="chest" href="#modal1">Modal</a>
 <!-- Modal Structure -->
 <div id="modal1" class="modal">
    <div class="modal-content">
      <img src="http://www.motsandco.com/wp-content/uploads/avatar-1-300x300.png" alt="">
    </div>
    <div class="modal-footer">
      <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

但我想要像这样的人：

Answer 1

通过使用JavaScript将display从none切换到block，可以显示模态。它的设定宽度为55%。

要使其宽度适应其内容，您需要将其显示设置为inline-block。要使其覆盖JavaScript设置的style属性的特异性，您需要提供!important。但是当它不可见时，它也会覆盖display:none。并且似乎没有应用任何类，因此您可以挂钩并仅在打开时设置模式。

但你可以使用flexbox轻松解决这个问题。只需将模态包装在display:flex父级中：

 <div class="center-modal">
  <div id="modal1" class="modal">
    ...
  </div>
 </div>

.center-modal {
  display: flex;
}
.center-modal .modal {
  position: relative;
  width: auto;
}

更新了codepen。

Answer 2

这里有几个问题：

.modal的宽度为55％。
.modal position: fixed right: 0和left: 0 div，width: auto扩展（参见What does "top: 0; left: 0; bottom: 0; right: 0;" mean?）

我将right: auto，left: 50%和transform: translateX(-50%)设置为!important以使模式居中。查看更新的CodePen。

（注意：我使用2014-08+03:00来覆盖您的外部样式，您不应该这样做，而是更改源中的正确样式）

Answer 3

尽管所有建议都没有为我完成100％的工作，但我尝试了width: max-content; CSS属性。

HTML

  <div id="modal1" class="modal modal-fit-content">
    ...
  </div>

CSS：

.modal-fit-content {
  width: max-content; /* note, you may sometimes have to use !important */
}

要使其保持响应状态，请使用以下方式：

@media #{$extra-large-and-up} {
    .modal-fit-content {
      width: max-content;
     /* set width to auto or simply ignore the class on smaller screens */
    }
}

如何创建一个可调整其内容的模态？ Materializecss

3 个答案: