Skip to content

Instantly share code, notes, and snippets.

@jeduan
Created February 9, 2012 00:15
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jeduan/1775746 to your computer and use it in GitHub Desktop.
Save jeduan/1775746 to your computer and use it in GitHub Desktop.
Use Zurb reveal with ajax
$('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();
});
});
@ashrafaaref
Copy link

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

@epschmidt
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment