如何自定义模态的大小

Posted 2023-03-06

【中文标题】如何自定义模态的大小

【英文标题】：How to customize size of the modal

【发布时间】：2016-12-31 19:00:48

【问题描述】：

如何使用 bootstrap 或 angular2 modal 来做到这一点？或者有更少或角度2动画的任何想法？到目前为止，我实现了这个：

<div class="modal-dialog" role="document">
<div class="modal-content pageColor">

和 pageColor CSS：

.pageColor
 background-color: rgba(127, 205, 190,0.85);
 width: 50%;
 height: 50%;

使用这种样式，屏幕的一半看起来不弯曲。

【问题讨论】：

请发布代码，说明您尝试了什么以及失败的地方。

跟bootstrap有关，去掉angular2标签

查看更新后的问题

它就像改变模态视图的背景形状，如圆形或方形或曲线

【参考方案1】：

使用-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; 作为包装器。运行代码。我猜粉红色的框是你需要的模态框的样子。

.modal-box height:250px; width:250px; background:#ccc; float:left; margin-right:10px;

.modal-curvedheight:250px; width:250px; background:pink;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; float:left;

<div class="modal-box">
</div>

<div class="modal-curved">
</div>

【参考方案2】：

我真的不知道您需要什么，但我认为我已经这样做了，只需覆盖模态元素上的引导 css 属性。

所以，在您的自定义 css 中：

// or the classes path or whatever to reach the element
.modal 
  width: 75%; // or whatever you want

注意@media 查询可能会重新覆盖您的更改。

【讨论】：

它就像改变模态视图的背景形状，如圆形或方形或曲线