Magnific popup

Inline Item

//html
<a href="#" class="call_back">Call me</a>

<div id="callback" class="item_popup mfp-hide">
    <p class="name_item_popup">name popup</p>
</div>

//js
$('body').on('click', 'a.call_back', function () {
        $.magnificPopup.open({
            items: {
                src: '#callback',
                type: 'inline',
                removalDelay: 300,
                preloader: false
            },
            mainClass: 'mfp-fade'
        });
        return false;
});

//fade effect sass
.mfp-fade
  &.mfp-bg
    opacity: 0
    transition: all 0.15s ease-out
    &.mfp-ready
      opacity: 0.8
    &.mfp-removing
      opacity: 0
  &.mfp-wrap
    .mfp-content
      opacity: 0
      transition: all 0.15s ease-out
    &.mfp-ready .mfp-content
      opacity: 1
    &.mfp-removing .mfp-content
      opacity: 0
      
//item sass
.item_popup
  max-width: 500px
  background: #fff
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.4)
  padding: 40px 30px 40px
  margin: 0 auto
  position: relative