중력 양식 아약스가 BlockRevealers 팝업에서 아무런 응답도하지 않습니다.

Question

중력 양식이이 블록 공개 자와 함께 작동하지 않는 멋진 팝업으로 작업 중입니다. 기본 양식 인 ajax를 선택했고 블록 표시 자에서 작업 중입니다. html 코드와 js 코드를 확인하십시오.

블록 계시 사용 - Block Revealer

HTML

<button id="event-rental-form-trigger" class="btn btn-primary" 
     title="Click Me">Click Me</button> 

    <div id="event-rental-modal" class="modal"> 

     <span id="event-rental-modal-close" class="i-close event-rental-modal-close"></span> 

     <div class="form-block caps"> 
      <h2 class="text-center pad-bottom-sm">Event Rental Request</h2> 
      <?php echo do_shortcode('[gravityform id=1 title=false description=false ajax=true]'); ?> 
     </div><!-- .form-block --> 

    </div><!-- .modal --> 

JS

if ($('#event-rental-modal').length) { 
var eventRentalModalEl = document.querySelector('#event-rental-modal'), 
     eventRentalModalRevealer = new RevealFx(eventRentalModalEl), 
     //deleteCtrl = modalEl.querySelector('#newsletter-form-trigger'), 
     eventRentalModalCloseCtrl = eventRentalModalEl.querySelector('#event-rental-modal-close'); 

document.querySelector('#event-rental-form-trigger').addEventListener('click', function() { 
    eventRentalModalEl.classList.add('modal--open'); 
    $('#site-wrapper').addClass('js-overlay'); 
    eventRentalModalRevealer.reveal({ 
    bgcolor: '#393E46', 
    direction: 'tb', 
    duration: 400, 
    easing: 'easeOutCirc', 
    onCover: function (contentEl, revealerEl) { 
     contentEl.style.opacity = 1; 
    }, 
    onComplete: function() { 
     eventRentalModalCloseCtrl.addEventListener('click', closeEventRentalModal); 
    } 
    }); 
}); 


function closeEventRentalModal(ev) { 
    eventRentalModalCloseCtrl.removeEventListener('click', closeEventRentalModal); 
    $('#site-wrapper').removeClass('js-overlay'); 
    eventRentalModalEl.classList.remove('modal--open'); 
    eventRentalModalRevealer.reveal({ 
    bgcolor: ev.target.classList.contains('event-rental-modal-close') ? '#393E46' : '#FFB823', 
    direction: 'bt', 
    duration: ev.target.classList.contains('even-rental-modal-close') ? 200 : 400, 
    easing: 'easeOutCirc', 
    onCover: function (contentEl, revealerEl) { 
     contentEl.style.opacity = 0; 
    }, 
    onComplete: function() { 
     modalEl.classList.remove('modal--open'); 
    } 
    }); 
} 

} 마침내 생에 대한 수정을 찾을

Answer 1

문제. 문제는이 블록이 js가 div를 div의 래핑하여 "block-revealer__content"클래스로 애니메이션에 적용했기 때문에 중력 형식의 자바 스크립트가 작동하지 않는다는 것입니다.

몇 가지 맞춤 jquery 함수가 추가되었으며 완벽하게 작동합니다 .

$('.modal-trigger').on('click', function() { 
    var modalID = $(this).attr('id'); 
    var animatingColor = '#393E46'; 

    if($('.' + modalID).hasClass('tour-schedule-modal')){ 
    var animatingColor = '#FFB823'; 
    } 

    var commonModalRevealItem = document.querySelector('.' + modalID); 
    var commonModalRevealer = new RevealFx(commonModalRevealItem); 

    $('#popup-overlay').addClass('js-active'); 

    commonModalRevealer.reveal({ 
    bgcolor: animatingColor, 
    direction: 'tb', 
    duration: 300, 
    easing: 'easeOutCirc', 
    onCover: function (contentEl, revealerEl) { 
     commonModalRevealItem.classList.add('modal--open'); 
     contentEl.style.opacity = 1; 
    } 
    }); 

    $('.' + modalID).find('.modal-close').on('click', function() { 
    closeModal(); 
    }); 

    $('#popup-overlay').on('click', function() { 
    closeModal(); 
    }); 


    function closeModal() { 
    $('.modal').remove('modal--open'); 
    commonModalRevealer.reveal({ 
     bgcolor: animatingColor, 
     direction: 'bt', 
     duration: 300, 
     easing: 'easeOutCirc', 
     onCover: function (contentEl, revealerEl) { 
     contentEl.style.opacity = 0; 
     }, 
     onComplete: function() { 
     commonModalRevealItem.classList.remove('modal--open'); 
     if ($('.' + modalID + ' .modal-inner').parent().hasClass('block-revealer__content')) { 
      $('.' + modalID + ' .modal-inner').unwrap(); 
      $('.modal .block-revealer__element').remove(); 
     } 
     $('#popup-overlay').removeClass('js-active'); 
     } 
    }); 
    } 


    var gfScript = new Function($('.' + modalID + ' script').text()); 
    gfScript();` 

}); 

.modal 트리거 - 팝업 열기 버튼

modalID - 버튼 ID (관련 팝업 클래스와 동일한 ID를 가지고)를

중력 양식을 다시로드 코드

VAR gfScript = 새로운 기능 ($ ('.'+ modalID + '스크립트'). 텍스트());

gfScript();