-
-
Save tnog/5833776 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($) { | |
$.fn.displayPost = function() { | |
event.preventDefault(); | |
var post_id = $(this).data("id"); | |
var id = "#" + post_id; | |
// Check if the reveal modal for the specific post id doesn't already exist by checking for it's length | |
if($(id).length == 0 ) { | |
// We'll add an ID to the new reveal modal; we'll use that same ID to check if it exists in the future. | |
var modal = $('<div>').attr('id', post_id ).addClass('reveal-modal').appendTo('body'); | |
var ajaxURL = MyAjax.ajaxurl; | |
$.ajax({ | |
type: 'POST', | |
url: ajaxURL, | |
data: {"action": "load-content", post_id: post_id }, | |
success: function(response) { | |
modal.empty().html(response).append('<a class="close-reveal-modal">×</a>').foundation('reveal', 'open'); | |
modal.bind('opened', function() { | |
// Reset visibility to hidden and set display: none on closed reveal-modal divs, for some reason not working by default when reveal close is triggered on .secondary links | |
$(".reveal-modal:not('.reveal-modal.open')").css({'visibility': 'hidden', 'display' : 'none'}) | |
// Trigger resize | |
$(window).trigger('resize'); | |
return false; | |
}); | |
} | |
}); | |
} | |
//If the div with the ID already exists just open it. | |
else { | |
$(id).foundation('reveal', 'open'); | |
} | |
// Recalculate left margin on window resize to allow for absolute centering of variable width elements in window | |
$(window).resize(function(){ | |
var left; | |
left = Math.max($(window).width() - $(id).outerWidth(), 0) / 2; | |
$(id).css({ | |
left:left + $(window).scrollLeft() | |
}); | |
}); | |
} | |
})(jQuery); | |
// Apply the function when we click on the .reveal and .secondary links in open modals | |
jQuery(document).on("click", ".reveal,.secondary", function() { | |
jQuery(this).displayPost(); | |
}); | |
/* Close open modal via secondary paging links by retrieving parent div's id | |
* Uses native foundation functions */ | |
jQuery(document).on("click", ".secondary", function() { | |
var id = jQuery(this).closest("div").attr("id"); | |
jQuery(id).foundation('reveal', 'close'); | |
}); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Modified jeduan's script to allow WordPress Ajax to use Zurb Foundation's inbuilt modal display plugin Reveal, also centers reveal-modal window for variable sized content, includes paging navigation.