CODEWITHSUNDEEP
htmlcssmodal-dialog
Duplicated
Duplicated

Reputation: 85

Bootstrap Circle Modal

I am trying to create a bootstrap modal in a circular Form. Already created one but my problem is how can i insert the Text in the middle of the circle modal responsively?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
  .modal-content {
    background-color: #0099FF;
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: auto;
    padding-top: 100%;
  }
</style>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    </div>
  </div>
</div>

Upvotes: 0

Views: 2770

Answers (2)

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

Flex box will help you, and I have removed padding-top that was pushing content in bottom. for height I have used height:100vw and max-height:600px that will make box proper circle shape. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<style>
  .modal-content {
    background-color: #0099FF;
    position: relative;
    border-radius: 50%;
    width: 100%;
    height: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 600px;
  }
</style>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      Content
    </div>
  </div>
</div>

Upvotes: 2

linktoahref
linktoahref

Reputation: 7992

Append a div to model-content and give it position:absolute and position it to be in the center

<style>
   .modal-content {
      background-color: #0099FF;
      position: relative;
      border-radius: 50%;
      width: 100%;
      height: auto;
      padding-top: 100%;
   }
   #text {
     position: absolute;
     top:50%;
     left:45%;
   }
</style>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
   Modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div id="text">Lorem ipsum</div>
      </div>
   </div>
</div>

Here's an example : http://www.bootply.com/kBT3elyYFV

Upvotes: 1

Related Questions