Pop-ups can take up less space on your website or can be used when the website needs to be more attractive. They can also use pop-ups to display a message or submit forms. In this code, we also have three pop-ups in different sizes. By clicking on the button related to them, these pop-ups are displayed. Each pop-up has two close buttons, one at the bottom and one at the top of the pop-up.


HTML
<!-- This script got from www.devanswer.com  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="alert-success list-group-item">
    <h2 class="text-center thumbnail panel-footer">Bootstrap Popup </h2>
    <div class="row">
      <div class="box box-style col-lg-4 col-md-12">
        <h2>Small Popup</h2>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModalS">Open Small Popup</button>
        <!-- Modal -->
        <div class="modal fade" id="myModalS" role="dialog">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Popup Header</h4>
              </div>
              <div class="modal-body">
                <p>This is a small Popup.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box box-style col-lg-4 col-md-12">
        <h2>Medium Popup</h2>
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Medium Popup</button>
        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
          <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Popup Header</h4>
              </div>
              <div class="modal-body">
                <p>This is a Medium Popup.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box box-style col-lg-4 col-md-12">
        <h2>Large Popup</h2>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModalL">Open Large Popup</button>
        <!-- Modal -->
        <div class="modal fade" id="myModalL" role="dialog">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Popup Header</h4>
              </div>
              <div class="modal-body">
                <p>This is a large Popup.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com ">Developers Answer</a></div>
                        

CSS
.container>div{
  margin-top: 50px;
}
.box {
  text-align: center;
  padding: 9px 0;
  background-color: hotpink;
  border-top: 1px solid darkgray;
}
.row {
  margin: 0;
  padding: 40px 0;
}
button.btn.btn-info.btn-lg {
  width: 204px;
}
.row .box:first-child {
  border: 0;
}