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