Demo for Bootstrap Popup with Different Widths

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
.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;
}
</style>

</head>
<body>
<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>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>

Other Codes

Popup with 3D Movement

A 3D pop-up that contains a box that contains text that moves in the opposite direction by moving the mouse around it.

Various Animating Modal Popups

There are several pop-up animation codes, each with its own charm, some covering the entire background and some covering only a small part of it with . . .

Pure CSS Blue Popup

In this code we have a pop-up without any JavaScript file. This pop-up has a blue theme and a bit of gradient has been used in its color.

Delete Confirmation Popup Code

In this code, we have a full-width pop-up that opens the pop-up by clicking on its button, and we can remove an item from the website.