如何创建一个可调节其内容的模式? 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
答
您模式的显示是由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。
如果使用此居中方法,则必须确保模态宽度不大于视口宽度。如果是,则失去访问模态左侧的一部分的能力,等于模态宽度和视口宽度之差的一半。一个简单的'.modal {max-width:90vw;}'会做(或者'100vw',如果你愿意的话)。此外,出于某种原因,使用绝对定位使模式获得垂直滚动条时,视口不够高,不知道为什么,我正在研究它。 –
谢谢@AndreiGheorghiu! _Also:Upvoted你的答案,因为它显然更好_ :) –
谢谢。垂直滚动条也与绝对定位有关。如果你检查模态,当视口的高度很小时,你会看到它被渲染到体外。这种50/50定心技术适用于小型物件。当内容集中度大于父母时,存在不少问题。干杯! –