1

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.

  • WordPress is sort of incidental here. This is mostly a pure JavaScript question. You'll probably have more luck asking at stackoverflow.com – Jacob Peattie Jul 30 '18 at 14:39
1

Try removing children inside #qdModalWindow before attempting load new content inside it.

  $('#qdModalWindow').children().remove();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.