Joy of Giving - an act of Gentleness

 array(8) 
[
    "obj_type"   => string(6) "module"
    "obj_id"     => string(43) "module:m_root_request-callback-popup:KGISWy"
    "slug"       => string(22) "request-callback-popup"
    "hash"       => string(29) "m_root_request-callback-popup"
    "title"      => string(22) "request-callback-popup"
    "collection" =>  array(1) 
        [
            "post_type" => string(6) "m_root"
        ]
    "post_type"  => string(6) "m_root"
    "templates"  =>  array(1) 
        [
            "main" =>  array(2) 
                [
                    "code" => string(5204) "
  [css.style]
  a.request-callback {
    position: fixed;
    z-index: 999999999;
    left: ~"calc(100% - 37px)";
    top: 50%;
    color: #fff;
    transform: rotate(-90deg) translateX(-50%);
    transform-origin: 0% 0%;
    white-space: nowrap;
    border-radius: 10px 10px 0 0;
    font-size: 16px;
    box-shadow: 0px -3px 8px rgba(0, 0, 0, 0.16);
    &:hover{
    		padding-bottom: 15px;
    		left: ~"calc(100% - 47px)";
    }
  }
  .request-callback-popup {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9999999999;
      overflow-y: auto;
      background-color: rgba(0,0,0,0.6);
      @media only screen and (min-width: 576px) {
          .container {
              max-width: 540px;
          }
      }
      @media only screen and (min-width: 768px) {
          .container {
              max-width: 720px;
          }
      }
      @media only screen and (min-width: 992px) {
          .container {
              max-width: 960px;
          }
      }
      @media only screen and (min-width: 1200px) {
          .container {
              max-width: 1140px;
          }
      }
      @media only screen and (max-width: 767px) {
          .pad-x-8 {
              padding-left: 25px;
              padding-right: 25px;
          }
      }
      .btn{
          white-space: normal;
          img{
               width: 22px;
          }
      }
      .close-request-callback-popup{
          position: absolute;
          right: 15px;
          top: 0;
          cursor: pointer;
          &:hover{
              color: @brand-secondary;
          }
      }
      .btn.btn-sm {
          font-size: 13px;
          padding: 7px 20px;
          min-height: auto;
      }
      p{
          margin-bottom: 5px;
      }
      .popup-content{
      		&.popup-open{
                animation: slide-in-elliptic-right-fwd 0.7s ease-in-out both;
          }
          &.popup-closed {
                animation: slide-out-elliptic-right-bck 0.5s ease-in both;
          }
      }
  }
  
    
    @keyframes slide-in-elliptic-right-fwd {
      0% {
        -webkit-transform: translateX(2100px) rotateY(-30deg) scale(0);
                transform: translateX(2100px) rotateY(-30deg) scale(0);
        -webkit-transform-origin: -100% 50%;
                transform-origin: -100% 50%;
        opacity: 0;
      }
      100% {
        -webkit-transform: translateX(0) rotateY(0) scale(1);
                transform: translateX(0) rotateY(0) scale(1);
        -webkit-transform-origin: -1800px 50%;
                transform-origin: -1800px 50%;
        opacity: 1;
      }
    }

    @keyframes slide-out-elliptic-right-bck {
      0% {
        -webkit-transform: translateX(0) rotateY(0) scale(1);
                transform: translateX(0) rotateY(0) scale(1);
        -webkit-transform-origin: -1800px 50%;
                transform-origin: -1800px 50%;
        opacity: 1;
      }
      100% {
        -webkit-transform: translateX(2100px) rotateY(-30deg) scale(0);
                transform: translateX(2100px) rotateY(-30deg) scale(0);
        -webkit-transform-origin: -100% 50%;
                transform-origin: -100% 50%;
        opacity: 1;
      }
    }

  [/css.style]
  
	<a href="#" class="brand-secondary-bg pad-1 pad-x-5 request-callback">REQUEST A CALLBACK</a>
  <div class="request-callback-popup">
      <div class="container">
          <div class="gap-6"></div>
          <div class="row justify-content-center">
              <div class="col-md-8 popup-content popup-closed">
              	<div class="brand-white-bg pad-6">
                  <i class="close-request-callback-popup font-bold font-size-large icon-close pad-x-1"></i>
                  <h5 class="font-bold mar-b-5">Kindly Fill up the details to receive a call from our Career expert</h5>
                  [if.empty module.campaign_course]
                  	[form.popup-from.enquiry_form /]
                  [/if.empty]
                  [if.not_empty module.campaign_course]
                  	[form.popup-from.campaign_enquiry_form course="{module.campaign_course}" /]
                  [/if.not_empty]
                </div>
                <div class="is-none">[aw2.get module dump="true" /]</div>
              </div>
          </div>
          <div class="gap-6"></div>
      </div>
  </div>
  <script type="spa/axn" axn="core.run_script">
    $(".request-callback").click(function(e){
        e.preventDefault();
        $(this).fadeOut();
        $(".request-callback-popup").fadeIn("fast");
        $("html").css("overflow-y","hidden");
        $(".request-callback-popup .popup-content").removeClass("popup-closed").addClass("popup-open");
    });

    $(".close-request-callback-popup").click(function(){
        $(".request-callback-popup .popup-content").removeClass("popup-open").addClass("popup-closed");
       	setTimeout(function(){
          	$(".request-callback-popup").fadeOut(200);
        		$(".request-callback").fadeIn(200);
            $("html").css("overflow-y","auto");
        },500);
        setTimeout(function(){
            $("html").css("overflow-y","auto");
        },1000);

    });
  </script>
"
                    "name" => string(4) "main"
                ]
        ]
]