制作圆形模态

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