Question

I have a problem, I have two different modal boxes on my site. And if I press the button which loads them before the page is fully loaded, it loads the wrong modal box (always the first one).

How can I fix this issue? Would it be plausible to disable buttons until page is fully loaded? Or is there another method that would be more UI friendly?

Answer 1

You could always put the calls to the modal plugin into a $(window).load(function(){ /* ... */ }) event-handler, rather than $(document).ready(function(){ /* ... */ });, which would prevent the modal dialogs being attached until the window has finished loading:

$(window).load(
    function(){
        $('#modalTriggerElementOne').modalPlugin();
        $('#modalTriggerElementTwo').otherModalPlugin();
    });

Failing that, you could simply disable the buttons in the $(document).ready() and then, on $(window).load() re-enable them:

$(document).ready(
    function(){
        $('input:button').attr('disabled',true);
        /* ...other stuff... */
    });

$(window).load(
    function(){
        $('input:button').removeAttr('disabled');
    });

But that seems unnecessarily clunky.

Obviously, if you can provide details of your code/script we might be able to provide better answers to your question.