SimpleModal和Jquery（如何打开和关闭动画）？

http://www.ericmmartin.com/projects/simplemodal/SimpleModal和Jquery（如何打开和关闭动画）？

页面底部附近有两个示例，显示如何打开或关闭动画。

我很新jquery。我如何声明onOpen和onClose？（我只能够得到一次一个工作

jQuery(function ($) { 
    $('a.basic').click(function (e) { 
     e.preventDefault(); 
     $('#basic-modal-content').modal(
      { 
       onClose: function (dialog) 
       { 
        dialog.container.fadeOut('slow', function() { 
        }); 
       } 
      } 
     ); 
    }); 

});

感谢您的帮助，您可以提供

来源

2010-03-22 Matthew

你只需要在你的对象映射来定义onOpen选项：。

function myOpen(dialog){ 
    // Do something with the dialog 
} 
function myClose(dialog){ 
    // Do something else with the dialog 
} 
$('#basic-modal-content').modal({ onOpen: myOpen, onClose: myClose });

或者，你可以在函数调用就像你在您的文章做了声明回调：

$('#basic-modal-content').modal({ 
    onOpen: function(){ 
     // Do something with the dialog 
    }, 
    onClose: function(){ 
     // Do something else 
    } 
});

来源

2010-03-22 17:37:32 ground5hark

是否有方式来设置它与任何模式窗口？而不是每次都必须声明每一个dif（在这种情况下“basic-modal-conent”）有没有办法让所有模态窗口的动画都一样？也有，因为某些原因，当我把onOpen并按照你的建议，当窗口打开时它会立即关闭 – Matthew 2010-03-22 18:03:25

要定位所有的模态，你应该为每个需要的DOM元素添加一个'模态'类，然后定位$（'。modal'）。你发布你的确切代码onOpen，并onClose？ – ground5hark 2010-03-22 18:10:09

事情是，每一个都是唯一的。例如，一个页面上可能有两个链接。一个标题为“注册”的另一个标题为“联系人”的链接。 div的id为“simplemodal-register”，联系人应该打开“simplemodal-contact”。我将在网站上有几个这样的代码，所以我宁愿将代码缩写为不重写每个div需要示例代码位于：http://www.ericmmartin.com/projects/simplemodal/#example-10 感谢您的帮助。 – Matthew 2010-03-22 18:16:47

在阅读您的最新评论后，我同意ryanulit。不过，这里有一个解决方案来实现你所描述的内容。你可以接触和登记环节做这样的事情：如果你想设置一个

：

<a href="#">Contact</a> 
<a href="#">Register</a>

你可以做这样的事情：

$('a[href=#]').click(function(){ 
    // Will reference 'contact' or 'register' 
    var modalType = $(this).text().toLowerCase(); 
    $('simplemodal-' + modalType).modal({ /* Options... */ }); 
});

来源

2010-03-22 20:16:10 ground5hark

回答了一个问题选项一次为所有模式使用，你可以这样做：

$.modal.defaults.onClose = function (dialog) { 
    // your code 
    $.modal.close(); 
}

来源

2010-03-23 03:09:07

嗨，埃里克。感谢您提供优质的产品！我很好奇onClose方法。我的代码与@Nathan“onClose”类似，如下所示。当我调用modal在document.ready（）上弹出，然后用关闭按钮关闭它时，再次使用页面上另一个元素的按钮单击来调用它，然后尝试再次使用相同的close关闭它按钮点击它不会触发？ ESC键始终工作。有什么我失踪？如果你想要一个例子，我可以创建另一个问题线程和一个小提琴。 – 2013-12-27 13:10:19

最简单的方法来做到这一点我s到只是将二者结合起来的例子，他提供here：

//打开动画

$("#sample").modal({onOpen: function (dialog) { 
    dialog.overlay.fadeIn('slow', function() { 
     dialog.data.hide(); 
     dialog.container.fadeIn('slow', function() { 
      dialog.data.slideDown('slow'); 
     }); 
    }); 
}});

//关闭动画

$("#sample").modal({onClose: function (dialog) { 
    dialog.data.fadeOut('slow', function() { 
     dialog.container.hide('slow', function() { 
      dialog.overlay.slideUp('slow', function() { 
       $.modal.close(); 
      }); 
     }); 
    }); 
}});

//联合动画

$("#sample").modal({onOpen: function (dialog) { 
    dialog.overlay.fadeIn('slow', function() { 
     dialog.data.hide(); 
     dialog.container.fadeIn('slow', function() { 
      dialog.data.slideDown('slow'); 
     }); 
    }); 
}, 
onClose: function (dialog) { 
    dialog.data.fadeOut('slow', function() { 
     dialog.container.hide('slow', function() { 
      dialog.overlay.slideUp('slow', function() { 
       $.modal.close(); 
      }); 
     }); 
    }); 
}});

来源

2013-01-19 22:05:25 Nathan

SimpleModal和Jquery（如何打开和关闭动画）？

回答

相关问题