对话框的动态大小调整

Question

我正在为chromebook(学校(编写PWA，我想知道动态调整对话框大小的最佳方法是什么。

我为每个HTML元素设置了方法，我们可以使用这些方法并传递我们需要的值(输入/复选框/标签(等等，所以我有多个对话框，它们具有相同的类，但需要不同的大小。

我有一些基本的东西，比如

.modal {
min-width: 390px;
max-width: 600px;
display: none; /* Hidden by default */
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 0px;
border: 1px solid #888;
width: 40%; /* Could be more or less, depending on screen size */
border-radius: 6px;
font-size: 14px;
}

我也想过在创建对话框时添加一个宽度值来发送，但我不喜欢这个解决方案。获得最大元素的宽度并添加10倍填充的东西？

我有没有遗漏一些可以简单解决的东西？(它也是理想的香草javascript(

Answer 1

如果我正确理解了你的问题，你正在尝试为模式弹出窗口创建一个类，该类的大小将根据里面的内容而不同，并且你可以在使用Javascript时切换可见性。

也许这个解决方案太简单了，但您是否考虑过使用填充来替换css中的最小宽度值？

类似margin: 0; padding: 0.5vw 195px; /* instead of min width, use padding */

这将把元素的宽度设置为390px(左填充195px，右填充195px(+html内容的宽度(见下面的代码笔(。

https://codepen.io/KXNG420/pen/eYdvZgN

至于设置最大宽度，您可以在切换模式窗口的可见性时添加快速检查。

希望这至少能有所帮助。