Ajax Modal Flickers When Opened Multiple Times

Question

on my WordPress site I add a button that when clicked calls a modal to open via ajax. When I click the button once on a fresh reload of the page it seems to work fine without any hiccups. If I close that modal then and click the button to open it again, without refreshing the page it will open, but flicker once and then stay opened. If I close it again and open it back up it flickers 3-4 times before staying open. And this continues with more flickers the more I click the button.

jQuery(document).ready(function ($) {
// LAUNCH CALCULATOR/QUIZ MODAL
function qdLoadModal(){
    var options = {
            modal: true,
            height:300,
            width:500
        };

    $('#qdModalWindow').load('/wp-content/themes/gift/qdCalcModal.php');
    $('#qdModal').addClass('open');
    $('#qdModal').animate({
        opacity: 1.0,
    }, 250, function() {
        // Animation complete.
        //qdQuestionHeight();
    });


}

//Launch Quiz Modal
$('.calcLaunch').click(function( event ) {
    event.preventDefault();
    qdLoadModal();
});
});

That is the jQuery I am using to load in the modal file on button click. I can’t figure out why the modal does the flickering thing when opened multiple times without reloading the page. If more information about my code is needed I can supply it, but really not sure what to do to fix it after a few hours of trying to troubleshoot it.

EDIT: I actually found a fix for this. I changed the click function to:

    $('.calcLaunch').one("click", function( event ){
    event.preventDefault();
    qdLoadModal();
    });

Changing the function to this then only runs it once on click removing the flicker.

0
, , Logan C 1 year 2020-07-27T04:15:42-05:00 0 Answers 17 views 0

Leave an answer

Browse
Browse