Added onClose callback option

[anseki]

Hi evansharp. Thank you for your pull request. But, this callback is called before the modal window is closeed, because it is called when opt.effect.close is started. I mean this is beforeClose event. I'll write code that trigger close event. Please check my next commit.

[evansharp]

anseki, The name of the function may not be semantic, but I added it it right when I think a hook would be useful. I agree beforeClose is better.

I'm not sure this new optional callback should cause a close though. I think it should be called by the close event, not the other way around. Is that what you meant by saying you'll write it into the close event?

So that you understand what I'm doing, check http://evansharpdesign.com/new/portfolio/risolv and see how I've used my addition to dynamically destroy the content of the modal when it is closed. The idea is that the content is added to the DOM (by ajax) when the modal is opened and removed when it is closed.

[anseki]

Your page has small problem. The plainModal fades out two elements, a modal window and an overlay. But, your script removes a modal window immediately before that. Then an overlay is left behind. Check below. http://jsfiddle.net/CVh49/

Of course this is small problem, but I think that authors want doing something when the page is restored. For example, the movie clip pauses while modal window is opened, and that movie clip restarts after the page is restored complete.

The current version supports plainmodalopen event and plainmodalclose event by standard mechanism of jQuery. For example you can use .on() method, .off() method or etc.

modal.on('plainmodalopen', openHandler);
modal.on('plainmodalclose', closeHandler);

http://api.jquery.com/on/ http://api.jquery.com/off/

  $('a.modalImg').click(function(e) {
    e.preventDefault();
    $('<div class="modal">')
      .html('<img src="' + e.currentTarget['href'] + '" alt="">').appendTo('body')
      .plainModal('open')
      .on('plainmodalclose', function() { $('.modal').remove(); });
  });

Or

  $('a.modalImg').click(function(e) {
    e.preventDefault();
    $('<div class="modal">')
      .html('<img src="' + e.currentTarget['href'] + '" alt="">').appendTo('body')
      .plainModal('open', {
        close: function() { $('.modal').remove(); }
      });
  });

If you want hiding the modal window immediately, use duration option.

      .plainModal('open', { duration: 1 })

If you want reusing DOM. (To lighter page)

  var modal = $('<div class="modal"><img alt=""></div>').appendTo('body');
  $('a.modalImg').click(function(e) {
    e.preventDefault();
    modal.children('img').prop('src', $(this).attr('href'));
    modal.plainModal('open');
  });

[anseki]

fixed (supported plainmodalopen and plainmodalclose events)