CODEWITHSUNDEEP
jqueryjquery-uidialogmodal-dialog
angelynng
angelynng

Reputation: 33

Jquery dialog with fadeIn/fadeOut and load issues

My client wants a fadeIn/fadeOut image when loading interior pages. This is the page in question: http://angelynngrant.com/mei3/ouragency.html

Problems: (1) fadeIn does not work; (2) fadeOut works, but leaves a ghosted rectangle before 'destroy'; and (3) often onload (and on refresh), the modal appears in the top left of corner of the window and then "hops" in place to fadeOut.

I've adjusted my css to make most elements of the dialog box disappear and/or be transparent (e.g. .ui-dialog .ui-dialog-titlebar {visibility:hidden; background:transparent;}).

I have the load in the header:

<script type="text/javascript">                                         
    $(window).load(function() {                         
        $("#ModalSlide7").dialog({
            width: 564,
            height: 808,
            modal: true
        }); 
        $(".ui-dialog-titlebar").hide(); 
    });
</script>

And I have the rest of the modal in the body:

<div id="ModalSlide7">
    <img id="slide7" src="images/7.jpg" alt="Game of Authors vintage game">

    <script type="text/javascript">
        $('#slide7').fadeIn(3000, function() {
            $('#slide7').fadeOut(3000).queue(function (next) {
                $('#ModalSlide7').dialog('destroy').remove();
            });
        });
    </script>
</div>

Any help would be greatly appreciated.

(Note: Site design/styling is not finished.)

Upvotes: 3

Views: 8168

Answers (1)

David Spence
David Spence

Reputation: 8079

Here is a demo I put together of what I think you are after. Hope this helps!

$(function () {

    // On document ready setup your dialog to define what happens
    // when it gets shown and hidden and some basic settings
    $("#dialog").dialog({
        autoOpen: false,
        draggable: false,
        resizable: false,
        show: {
            effect: 'fade',
            duration: 2000
        },
        hide: {
            effect: 'fade',
            duration: 2000
        },
        open: function(){
            $(this).dialog('close');
        },
        close: function(){
            $(this).dialog('destroy');
        }
    });

    $(".ui-dialog-titlebar").remove();

    // Finally open the dialog! The open function above will run once
    // the dialog has opened. It runs the close function! After it has
    // faded out the dialog is destroyed
    $("#dialog").dialog("open");
});

I think your confusion comes with mixing functions provided by the jquery ui dialog and general jQuery functions (e.g. you were using fadeIn as opposed to configuring the dialog to fade in when the show function is called). Here is a big list of all the functions and lots of examples!

Upvotes: 13

Related Questions