javascript - Make modal in circle shape - Stack Overflow

admin管理员组

文章数量:1415484

I want to create a modal in circle shape instead of the regular rectangle with rounded corners. So it should look something like just a round with the modal-body in middle, no modal-header and no modal-footer.

This is with modal to make sure how it works, instead of regular html circle.

I just want it to look like this.

I want to create a modal in circle shape instead of the regular rectangle with rounded corners. So it should look something like just a round with the modal-body in middle, no modal-header and no modal-footer.

This is with modal to make sure how it works, instead of regular html circle.

I just want it to look like this.

• javascript
• html
• css
• twitter-bootstrap
• bootstrap-modal

Share Improve this question Follow edited Jun 9, 2016 at 12:01 Sibidharan asked Jun 9, 2016 at 11:49 SibidharanSibidharan 2,75622 gold badges3030 silver badges5454 bronze badges 5

• border-radius: 100% with equal width and height should do it – danimal Commented Jun 9, 2016 at 11:53
• 1 Possible duplicate of How to draw circle in html page? – jmattheis Commented Jun 9, 2016 at 11:54
• @jmattheis No it is about modals! Not circle in html page – Sibidharan Commented Jun 9, 2016 at 11:55
• @danimal can u show an example with modals? – Sibidharan Commented Jun 9, 2016 at 11:55
• 2 @Sibidharan a model is just a html tag (with content) which you can style – jmattheis Commented Jun 9, 2016 at 11:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You'll need to experiment with the location of the content within the modal, but here's a working example I've just made using border-radius: https://jsfiddle/2ahhsa4a/1/

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

You'll notice I've used fixed width / height for the modal, this is to ensure it is a perfect circle when bined with border-radius for this example.

HTML

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

CSS

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

本文标签： javascriptMake modal in circle shapeStack Overflow