Last active
December 29, 2022 12:25
-
-
Save sniperwolf/5652986 to your computer and use it in GitHub Desktop.
Super-Simple WordPress ajax post-popup with jQuery and Reveal plugin
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
<?php | |
/** | |
* Template Name: ajax | |
*/ | |
?> | |
<?php | |
$post = get_post($_GET['id']); | |
?> | |
<?php if ($post) : ?> | |
<?php setup_postdata($post); ?> | |
<div class="something"> | |
<h2 class="title"><?php the_title(); ?></h2> | |
<div class="content"> | |
<?php the_content(); ?> | |
</div> | |
</div> | |
<?php endif; ?> |
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
// We are using Wordpress' jQuery (in no-conflict mode) | |
// and the reveal plugin (http://zurb.com/playground/reveal-modal-plugin) | |
jQuery(document).on('ready', function () { | |
// Click on element with 'popup' class | |
jQuery('.popup').on('click', function () { | |
// Save ID in simple var | |
var id = jQuery(this) | |
.attr('rel'); | |
// Hide entire div and load in it the Post ID | |
jQuery('<div id="wp-popup"></div>') | |
.hide() | |
.appendTo('body') | |
// Substitute 'ajax' with your wordpress template name, | |
// and 'EXAMPLE.com' with your real URL | |
.load('http://www.EXAMPLE.com/ajax/?id=' + id) | |
// Modal Window | |
.reveal({ | |
// Optional parameters | |
animation: 'fadeAndPop', // fade, fadeAndPop, none | |
animationspeed: 300, // how fast animations are | |
closeonbackgroundclick: true, // if you click background will modal close? | |
dismissmodalclass: 'close-reveal-modal' // the class of a button or element that will close an open modal | |
}); | |
return false; | |
}); | |
}); |
this wont work when user is logged out, any fix for that?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
i should use that ajax.php as a template in my pages ?