简单模态 iframe 动画答案

【问题标题】：simplemodal iframe animation简单模态 iframe 动画
【发布时间】：2013-04-16 06:47:44
【问题描述】：

我正在使用 SimpleModal (http://www.ericmmartin.com/projects/simplemodal/)。我正在尝试让动画与 iframe 窗口一起使用。

我有 iframe 部分工作：

// Load dialog on click
    $('#clicky').click(function (e) 
    {
        $.modal('<iframe src="' + src + '" height="450" width="800" style="border:0">', 
        {
                closeHTML:"",
                containerCss:{
                                backgroundColor:"#fff", 
                                borderColor:"#fff", 
                                height:450, 
                                padding:0, 
                                width:800
                                },
                overlayClose:true
        });
    });

但我不知道如何将它连接到动画片段：

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

    });

所以我希望学习如何将 iframe 模态连接到淡入/淡出动画。任何人都可以帮助我或指导我到一个我可以学习的网站吗？谢谢

【问题讨论】：

标签： javascript jquery html simplemodal

【解决方案1】：

好吧，我想通了。这是对我有用的代码：

$('#clicky').click(
    function (e) 
    {
        $.modal('<iframe src="' + src + '" height="450" width="1800" style="border:0">', 
        {

                    closeHTML:"",
                    containerCss:
                    {
                                    backgroundColor:"#fff", 
                                    borderColor:"#fff", 
                                    height:450, 
                                    padding:0, 
                                    width:800
                    },
                    overlayClose:true,
                    //below adds a open animation
                    onOpen: function (dialog){
                    dialog.overlay.fadeIn('slow');
                    dialog.data.show();
                    dialog.container.fadeIn('slow');},
                    //below adds a close animation
                    onClose: function (dialog){
                    dialog.data.fadeOut('slow');
                    dialog.container.hide('slow');
                    dialog.overlay.slideUp('slow', function () {$.modal.close();});
                    }
        });
    });

不要忘记为 src 变量放置一个网站 :)

【讨论】：