如何创建一个可调节其内容的模式？ Materialisecss

问题描述：

有人知道如何让Modal适合其内容吗？当我放置宽度小于模式宽度的图像时，周围会有很多未使用的空间。下面是codepen https://codepen.io/hetsketch/pen/LjYvOp?editors=1100#0 如何创建一个可调节其内容的模式？ Materialisecss

<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>

但我想水木清华这样的：

答

这里有几个问题：

.modal有55％的宽度。
.modal有position: fixed既right: 0和left: 0，所以div膨胀（见What does "top: 0; left: 0; bottom: 0; right: 0;" mean?）

我设置width: auto，right: auto和left: 50%与transform: translateX(-50%)居中模式。请参阅更新的CodePen。

（注：我用!important覆盖您的外部风格，你不应该这样做，但是更改源正确的样式）通过切换display

如果使用此居中方法，则必须确保模态宽度不大于视口宽度。如果是，则失去访问模态左侧的一部分的能力，等于模态宽度和视口宽度之差的一半。一个简单的'.modal {max-width：90vw;}'会做（或者'100vw'，如果你愿意的话）。此外，出于某种原因，使用绝对定位使模式获得垂直滚动条时，视口不够高，不知道为什么，我正在研究它。 –

谢谢@AndreiGheorghiu！ _Also：Upvoted你的答案，因为它显然更好_ :) –

谢谢。垂直滚动条也与绝对定位有关。如果你检查模态，当视口的高度很小时，你会看到它被渲染到体外。这种50/50定心技术适用于小型物件。当内容集中度大于父母时，存在不少问题。干杯! –

答

您模式的显示是由none到block，使用JavaScript。它的设置宽度为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。

如何创建一个可调节其内容的模式？ Materialisecss

相关推荐