使模態成爲圓形

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;}