如果在页面完全加载之前按下，则模态框打开错误

Question

我有问题，我的网站上有两个不同的模态框。如果我在页面完全加载之前按下加载它们的按钮，它会加载错误的模态框（总是第一个）。

如何解决此问题？在页面完全加载之前禁用按钮是否合理？或者是否有另一种更友好的UI方法？

Answer 1

您总是可以将对模态插件的调用放入$(window).load(function(){ /* ... */ })事件处理程序，而不是$(document).ready(function(){ /* ... */ });，这会阻止模式对话框连接直到窗口已完成加载：

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

如果失败，您只需停用$(document).ready()中的按钮，然后在$(window).load()上重新启用它们：

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

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

但这似乎不必要地笨拙。

显然，如果您能提供代码/脚本的详细信息，我们可以为您的问题提供更好的答案。