Sunday, 15 March 2015

Jquery dialog with fadeIn/fadeOut and load issues -



Jquery dialog with fadeIn/fadeOut and load issues -

my client wants fadein/fadeout image when loading interior pages. page in question: http://angelynngrant.com/mei3/ouragency.html

problems: (1) fadein not work; (2) fadeout works, leaves ghosted rectangle before 'destroy'; , (3) onload (and on refresh), modal appears in top left of corner of window , "hops" in place fadeout.

i've adjusted css create elements of dialog box disappear and/or transparent (e.g. .ui-dialog .ui-dialog-titlebar {visibility:hidden; background:transparent;}).

i have load in header:

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

and have rest of modal in 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 appreciated.

(note: site design/styling not finished.)

here demo set of think after. hope helps!

$(function () { // on document ready setup dialog define happens // when gets shown , hidden , 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(); // open dialog! open function above run 1 time // dialog has opened. runs close function! after has // faded out dialog destroyed $("#dialog").dialog("open"); });

i think confusion comes mixing functions provided jquery ui dialog , general jquery functions (e.g. using fadein opposed configuring dialog fade in when show function called). here big list of functions , lots of examples!

jquery jquery-ui dialog modal-dialog

No comments:

Post a Comment