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 <[email protected]> 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 <[email protected]> wrote:
>
>
>
> > On Thu, Dec 31, 2009 at 2:13 AM, nevgenevich <[email protected]> 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 -
