Use Zurb reveal with ajax

reveal_ajax.js

$('a.reveal').click(function(event) {
  event.preventDefault();
  var $div = $('<div>').addClass('reveal-modal').appendTo('body'),
    $this = $(this);
  $.get($this.attr('href'), function(data) {
    return $div.empty().html(data).append('<a class="close-reveal-modal">&#215;</a>').reveal();
  });
});

Awesome, I took @tilsammans work one step further by filtering out the div I needed (#main)

jQuery('a.reveal').click(function(event) {
    event.preventDefault();
    var modal = jQuery('<div>').addClass('reveal-modal').appendTo('body');
    jQuery.get(jQuery(this).attr('href'), function(data) {
        var theData = data;
        modal.empty().html(jQuery(theData).filter('#main')).append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal', 'open');
    });
});

i'm wondering.
which one is better. using jQuery get or load?

because until now i still can't get this gist working using load :(

@tilsammans Thanks for posting this Foundation 4 work around. It helped me a lot.

@tilsammans so nice to go with. But I got a question.
when window pop up, the background doesn't be dark. just looking same.
And If click the close-button, window would go closing, but background page be dark and nothing can be possible there. Any idea?

@chegoon make sure you are appending it to the body, in other words it should be before the body closing tab

When using the method provided by @benleivian in Foundation 5, be sure to add the data-reveal attribute to the div...

jQuery('a.reveal').click(function(event) {
    event.preventDefault();
    var modal = jQuery('<div data-reveal>').addClass('reveal-modal').appendTo('body');
    jQuery.get(jQuery(this).attr('href'), function(data) {
        var theData = data;
        modal.empty().html(jQuery(theData).filter('#main')).append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal', 'open');
    });
});