如何自定义模态的大小

时间:2016-08-24 14:55:19

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

enter image description here我希望像这样的弯曲模态不是在顶部,而是在屏幕的一半,并在中心弯曲文字,为此我想自定义它的大小。

如何使用bootstrap或angular2模式进行操作?或者更少或有角度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%;

这种风格显示屏幕的一半不会弯曲。

2 个答案:

答案 0 :(得分:0)

我真的不知道你需要什么,但我认为我已经这样做了,只是覆盖模态元素上的bootstrap css attribut。

所以,在您的自定义CSS中:

import [Component, ViewChild, AfterViewInit] from '@angular/core'

export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent
  parentVariable

  ngAfterViewInit() {
    this.childComponent.childVariable = this.parentVariable
  }
}

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

答案 1 :(得分:0)

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

&#13;
&#13;
.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;}
&#13;
<div class="modal-box">
</div>

<div class="modal-curved">
</div>
&#13;
&#13;
&#13;