使模态成为圆形

Question

我想创建一个圆形而不是带圆角的矩形的模态。所以它应该看起来像是一个中间的modal-body，没有modal-header和没有modal-footer。

这是与模式，以确保它如何工作，而不是常规的HTML圈子。

我只是想让它看起来像这样。

Answer 1

您需要使用的模态中的内容的位置进行试验，但这里的使用border-radius工作的例子，我只是做：https://jsfiddle.net/2ahhsa4a/1/

.modal-content { 
    border-radius: 50%; 
    width: 600px; 
    height: 600px; 
    border: 15px solid #000; 
} 

你会发现我已经使用固定的width/height作为模式，这是为了确保它在此示例中与border-radius结合时是一个完美的圆。

Answer 2

HTML

 <div class="modal-body rounded"> 
     <p>Some text in the modal.</p> 
     </div> 

CSS

.rounded {border-radius: 100%; width: 500px; height: 500px;}