Question

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

Was it helpful?

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 :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top