Bootstrap Style Modal without using Bootstrap Framework



In this post, I gave bootstrap style popup without using the bootstrap Js and CSS. This popup has the body scroll only. If the popup height will increase the more than the windows size the main scroll will come. If you scroll the popup entire popup will scroll page not scroll. Not scroll come inside popup scroll come for entering the page.

This popup very comforts for mobile screens. Just copy the code below and past and used on your page. I have used the jQuery library for this popup. If you used this pop up on your web page you must the referred latest jQuery library.

One important thing you give the id in for the popup what ID you gave for popup same will used in the datatarget="" in the anchor tag.

If I give the anchor tag data target like this

<a href="javascript:void(0)" class="modal-open" data-target="#popupsm">Modal Small</a>

If I click the above link I want to open the popup. In that popup div

<div class="modal" id="popupsm"> ....... </div>

I called the data target id in the modal div you can see above div.

And also give four different sizes popup. Extra Large, Large, Medium, Small.





CSS:
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    font-family: arial;
  }

  .modal-container {
    margin: 2% auto;
    display: grid;
  }

  .modal-inner {
    float: left;
    background-color: #ffffff;
    width: 100%;
  }

  .modal-popup-title {
    border-bottom: 1px solid #dddddd;
    float: left;
    width: 100%
  }

  .modal-popup-title h1 {
    font-size: 20px;
    padding: 10px;
    float: left;
    line-height: 1.5;
    color: #333333;
    margin: 0;
  }

  .modal-popup-title a {
    float: right;
    margin: 15px 15px 0;
    font-size: 24px;
    color: #333333
  }

  .modal-popup-container {
    width: 100%;
    float: left;
    min-height: 100px;
    padding: 15px;
    box-sizing: border-box;
  }

  .modal-popup-container h1 {
    font-size: 18px;
  }

  .modal-popup-container p {
    font-size: 14px;
  }

  .popup-comes {
    overflow: hidden;
    margin-right: 18px
  }
  /*-- Popup Size Extra Large--*/
  .mdl-extra-large {
    width: 96%
  }
  /*-- Popup Size Large--*/
  .mdl-large {
    width: 80%
  }
  /*-- Popup Size Medium--*/
  .mdl-medium {
    width: 60%
  }
  /*-- Popup Size Small--*/
  .mdl-small {
    width: 40%
  }

  .modal-back-shadow {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, 0.79)
  }

jQuery:
$(".modal-open").click(function() {
    $("body").append('<div class="modal-back-shadow"></div>');
    $($(this).data("target")).show();
    $("body").addClass("popup-comes");
  });
  $(".modal-close").click(function() {
    $(".modal").hide();
    $(".modal-back-shadow").remove();
    $("body").removeClass("popup-comes");
  });

HTML:
<a href="javascript:void(0)" class="modal-open" data-target="#popupsm">Modal Small</a>

<div class="modal" id="popupsm">
  <div class="modal-container mdl-small">
    <div class="modal-inner">
      <div class="modal-popup-title">
        <h1>Modal Small</h1>
        <a href="javascript:void(0)" class="modal-close" data-dismiss="alert"><i class="mdi mdi-close"></i></a>
      </div>

      <div class="modal-popup-container">

        <h1>What is Lorem Ipsum?</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

      </div>
    </div>
  </div>
</div>
Copyright Labw3