#html #scss #css #js || modal window for contact form

footer.php

  <div class="modal-bg">
    <div class="modal-container">
      <?php echo do_shortcode('[contact-form-7 id="134" title="Добавить организацию"]'); ?>
    </div><!-- /.modal-container -->
    <span class="modal-close"><i class="fa fa-times" aria-hidden="true"></i></span>
  </div><!-- /.modal-bg -->

script.js

// Place any jQuery/helper plugins in here.
$(document).ready(function() {
  $('.modal-close').on('click', function(e) {
    CloseModal()
  })
  $('.modal-bg').on('click', function(e) {
    CloseModal()
  })

  $('.modal-container').on('click', function(e) {
    e.stopPropagation();
  })

  $('.header-btn__add').on('click', function(e) {
    e.stopPropagation();
    OpenModal();
    $('.modal-bg').addClass('modal-bg--opened').addClass('modal-recall');
  })

});

function CloseModal() {
  $('.modal-bg').attr('class', '').addClass('modal-bg');
  $('body').removeClass('modal-opened');
}

function OpenModal(html) {
  $('body').addClass('modal-opened');
}

style.scss

.modal-bg {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;
  // display: flex;
  flex-direction: row;

  background-color: rgba(71, 125, 202, .6);

  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  &.modal-bg--opened {
    display: flex;
  }
  .modal-container {
    width: 30%;
    min-width: 320px;
    padding: 0;

    border: 15px solid #ffffff;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: $base-box-shadow;
    form {
      label,
      p,
      input,
      textarea {
        font-weight: normal;
        line-height: 1.8;

        margin-bottom: 10px;
      }
      p {
        margin: 0;
      }
      .productname {
        textarea {
          height: 80px;
        }
      }
      .your-message {
        textarea {
          height: 120px;
        }
      }
    }
  }
  &.modal-product,
  &.modal-product-cat {
    .modal-container {
      h6 {
        font-size: 20px;
        font-weight: bold;

        margin-bottom: 10px;
        padding-bottom: 10px;

        text-align: center;

        border-bottom: 3px dotted $black;
      }
      h5 {
        font-size: 18px;
        font-weight: bold;

        margin-bottom: 0;
        padding-top: 8px;
        padding-bottom: 8px;

        text-align: center;

        border-top: 3px dotted $black;
        span {
          display: block;
        }
      }
      p {
        margin: 0;
      }
      label {
        margin-bottom: 0;
      }
      span.your-choise {
        display: none;
      }
      #your-choise--span {
        font-weight: bold;

        display: block;
      }
      label {
        margin-bottom: 0;
      }
      br {
        display: none;
      }
      input[name=choise-price] {
        font-weight: bold;

        margin-bottom: 0;
        padding: 0;

        border: 0;
        outline: none;
        box-shadow: none;
      }
      input[name='your-name'],
      input[name='your-phone'] {
        margin-bottom: 4px;
        padding: 5px;

        color: #000000;
        background-color: rgba(204, 204, 204, .24);
      }
      input[type=submit] {
        font-weight: bold;

        width: 100%;
        margin-bottom: 0;
        padding: 4px 0;

        text-align: center;
        text-transform: uppercase;
      }
    }
  }
  .modal-close {
    font-size: 60px;

    position: absolute;
    top: 50px;
    right: 50px;

    cursor: pointer;
    transition: $base-transition;

    color: #ffffff;
    &:hover {
      color: lighten($green, 25%);
    }
  }
}