有人知道如何让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 {max-width:90vw;}'会做(或者'100vw',如果你愿意的话)。此外,出于某种原因,使用绝对定位使模式获得垂直滚动条时,视口不够高,不知道为什么,我正在研究它。 –
谢谢@AndreiGheorghiu! _Also:Upvoted你的答案,因为它显然更好_ :) –
谢谢。垂直滚动条也与绝对定位有关。如果你检查模态,当视口的高度很小时,你会看到它被渲染到体外。这种50/50定心技术适用于小型物件。当内容集中度大于父母时,存在不少问题。干杯! –