制作圆形的模态

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