Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
});
});
@crealx

This comment has been minimized.

Copy link

@crealx crealx commented Feb 22, 2012

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

@spsaucier

This comment has been minimized.

Copy link

@spsaucier spsaucier commented Oct 22, 2012

Works great, thanks!

@bkrajendra

This comment has been minimized.

Copy link

@bkrajendra bkrajendra commented Nov 18, 2012

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

@bkrajendra

This comment has been minimized.

Copy link

@bkrajendra bkrajendra commented Nov 18, 2012

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

});

@tilsammans

This comment has been minimized.

Copy link

@tilsammans tilsammans commented Mar 29, 2013

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')
@benleivian

This comment has been minimized.

Copy link

@benleivian benleivian commented May 1, 2013

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

This comment has been minimized.

Copy link

@mohhasbias mohhasbias commented Jun 21, 2013

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 :(

@clinthubbardjr

This comment has been minimized.

Copy link

@clinthubbardjr clinthubbardjr commented Jun 29, 2013

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

@chegoon

This comment has been minimized.

Copy link

@chegoon chegoon commented Nov 19, 2013

@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?

@ashrafaaref

This comment has been minimized.

Copy link

@ashrafaaref ashrafaaref commented Mar 26, 2014

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

@epschmidt

This comment has been minimized.

Copy link

@epschmidt epschmidt commented Feb 4, 2015

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