I had time to play around with it more and narrowed it down to the onClose function...
this works: onClose: function (dialog) { jQuery.modal.close(); } this doesn't: onClose: function (dialog) { dialog.data.fadeOut(300); dialog.container.fadeOut(100); dialog.overlay.fadeOut(300, function () { jQuery.modal.close(); }); } but why does this happen and how can i get around it? can i set a timeout on the automated modal open (when clicking previous or next) equal or greater to the time it takes to close the modal? or is there a better way? any help is appreciated! On Dec 31 2009, 9:53 pm, nevgenevich <nevgenev...@gmail.com> wrote: > I played around with it, taking it step by step closer to my code > until i hit an issue, and narrowed it down to modal effects... below > is my change to full effects that i'm using for my project, ignore the > jQuery vs $, its my way of avoiding certain conflicts > > when i remove all these effects from my code the previous/next work, > but i need the effects to remain.... any ideas on why they could be > causing an issue (timing?) or how to make it work? > > jQuery('a.Foo').each(function() > { > jQuery(this).click(function() > { > jQuery('#modal_' + this.id).modal({ > overlayClose:true, > onOpen: function (dialog) { > dialog.overlay.fadeIn(300); > dialog.container.fadeIn(100); > dialog.data.fadeIn(300); > }, > onClose: function (dialog) { > dialog.data.fadeOut(300); > dialog.container.fadeOut(100); > dialog.overlay.fadeOut(300, function > () { > jQuery.modal.close(); > }); > }, > closeHTML:'<a href="#">Back</a>', > minHeight:540, > minWidth:940, > maxHeight:540, > maxWidth:940, > opacity:60 > }); > }); > }); > > On Dec 31, 12:37 pm, brian <zijn.digi...@gmail.com> wrote: > > > > > On Thu, Dec 31, 2009 at 2:13 AM, nevgenevich <nevgenev...@gmail.com> wrote: > > > > it generates the link properly, when clicking on it: it closes the > > > modal but does nothing else. i can verify with a console.log that it > > > gets to after the call to open the previous modal, but it doesnt open > > > anything..... checked to make sure it was generating the modal link > > > correctly too (ie calling the correct id) > > > It works fine for me. Here's the full page I used to test: > > > <!DOCTYPE html> > > <html> > > <head> > > <title></title> > > <link rel="Stylesheet" > > href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" /> > > <style> > > body { padding: 100px; } > > div.Bar { display: none; } > > </style> > > <script > > src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> > > <script src="jquery.simplemodal-1.3.3.min.js"></script> > > <script> > > $(function() > > { > > $('a.Foo').each(function() > > { > > $(this).click(function() > > { > > $('#modal_' + this.id).modal({overlayClose:true}); > > }); > > }); > > > var num_divs = $('div.Bar').length; > > > $('div.Bar').each(function(i) > > { > > /* if there is a previous div add a link to it > > */ > > if (i > 0) > > { > > /* get the ID for previous div > > */ > > var prev_id = $(this).prev('.Bar').attr('id'); > > > /* add the link with click event > > */ > > $('<a href="#" class="Prev">previous</a>') > > .click(function() > > { > > $.modal.close(); > > $('#' + > > prev_id).modal({overlayClose:true}); > > }) > > .appendTo($(this)); > > } > > > /* if there is a next div add a link to it > > */ > > if (i < num_divs - 1) > > { > > /* get the ID for next div > > */ > > var next_id = $(this).next('.Bar').attr('id'); > > > /* add the link with click event > > */ > > $('<a href="#" class="Next">next</a>') > > .click(function() > > { > > $.modal.close(); > > $('#' + > > next_id).modal({overlayClose:true}); > > }) > > .appendTo($(this)); > > } > > }); > > > }); > > > </script> > > </head> > > <body> > > > <ul> > > <li><a href="#" class="Foo" id="one">one</a></li> > > <li><a href="#" class="Foo" id="two">two</a></li> > > <li><a href="#" class="Foo" id="three">three</a></li> > > <li><a href="#" class="Foo" id="four">four</a></li> > > <li><a href="#" class="Foo" id="five">five</a></li> > > </ul> > > > <div class="Bar" id="modal_one">Modal one</div> > > <div class="Bar" id="modal_two">Modal two</div> > > <div class="Bar" id="modal_three">Modal three</div> > > <div class="Bar" id="modal_four">Modal four</div> > > <div class="Bar" id="modal_five">Modal five</div> > > > </body> > > </html>- Hide quoted text - > > - Show quoted text -