如何自定义模态的大小

我想要一个像这样的曲线模式，不是在顶部，而是在屏幕的一半，弯曲的文本在中心，为此我想定制它的大小。如何自定义模态的大小

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

这种风格它的出现在屏幕未弯曲的一半。

来源

2016-08-24 blackHawk

请张贴演示试了一下代码，并在那里你失败了。 –

它与引导相关删除angular2标签 – rashfmnb

看到更新的问题 – blackHawk

我真的不知道你需要什么，但我认为我已经这么做了，只需重写模态元素上的bootstrap css属性即可。

因此，只要在你的自定义CSS：

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

要照顾@media查询，可以重新在此改变你的变化。

来源

2016-08-24 15:01:27

看到更新的问题，其实我想曲线玲珑 – blackHawk

它就像改变模式视图的背景形状像圆圈或方块或曲线 – blackHawk

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

来源

2016-08-24 16:58:00

查看更新的问题 – blackHawk

如何自定义模态的大小

回答

相关问题