Popup Modal Box in HTML CSS & Js

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 increases the more than the windows size the page scroll will come. If you scroll the popup entire popup will scroll page not scroll. Not scroll come inside popup. The scroll will 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 popup on your webpage 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: 18px;
    color: #333333;
    text-decoration:none;
  }

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

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

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

  .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)
  }

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">X</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>

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");
});