如何自定义模态的大小答案

【问题标题】：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标签
查看更新后的问题
它就像改变模态视图的背景形状，如圆形或方形或曲线

标签： html css twitter-bootstrap angular bootstrap-modal

【解决方案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-curved{height: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 查询可能会重新覆盖您的更改。

【讨论】：

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