Search code examples
javascriptjqueryhtmlsimplemodal

simplemodal iframe animation


I am using SimpleModal (http://www.ericmmartin.com/projects/simplemodal/). I am trying to get an animation to work with the iframe window.

I have the iframe part working :

// 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
        });
    });

but I do not know how to connect it to the animation segment:

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

    });

So I was hoping to learn how to connect the iframe modal to a fade-in/fade-out animation. May anyone help me or direct me to a site that I can study, please? Thank you


Solution

  • Well, I figured it out. Here's the code that works for me:

    $('#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();});
                        }
            });
        });
    

    don't forget to put a website for the src variable :)