如何自定义模态的大小

Question

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

如何使用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%;

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

Answer 1

我真的不知道你需要什么，但我认为我已经这样做了，只是覆盖模态元素上的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查询。

Answer 2

使用-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;