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();
  });
});

Very very very usefull modification for Foundation prototype !
Thanks a lot

Works great, thanks!

Really great man worked like charm.... !
It will be great if we can add Loading backdrop..!

This worked

$('a.reveal').click(function(event) {
event.preventDefault();
var $div = $('

').addClass('reveal-modal').appendTo('body'),
$this = $(this);
$div.empty().html('

').append('×').reveal();

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

});


To make this work in Foundation 4 you need to send the foundation message to the div instead of reveal() directly.

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

in Coffeescript:

# https://gist.github.com/jeduan/1775746
$('a.reveal').on 'click', (event) ->
  event.preventDefault()
  modal = $('<div>').addClass('reveal-modal').appendTo('body')
  $.get $(this).attr('href'), (data) ->
    modal.empty().html(data).append('<a class="close-reveal-modal">&#215;</a>').foundation('reveal', 'open')

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');
    });
});