Skip to content

Instantly share code, notes, and snippets.

@thedapifer
Last active February 11, 2018 06:58
Show Gist options
  • Select an option

  • Save thedapifer/1bdf30ade0602724c1f668583c709331 to your computer and use it in GitHub Desktop.

Select an option

Save thedapifer/1bdf30ade0602724c1f668583c709331 to your computer and use it in GitHub Desktop.
WP BS Modal
/** Pop Post Modal **/
// Quick view ajax function on products page
$('body').on('click', '.modal-link', function (e) {
var post_id = $(this).data('id');
// prevent link from being followed
e.preventDefault();
$.ajax({
url : modal_ajax.url,
type : 'post',
data : {
post_id : post_id,
action : 'fetch_modal_content',
security : modal_ajax.nonce,
},
success : function(response) {
$('#pop-modal').modal('show');
}
});
});
/**** END Pop Post Modal ****/
/*** Blogroll Post Modal Popup ***/
/*
*
Localize script and create nonce.
*
*/
function pop_post_modal_localize_scripts() {
wp_localize_script( 'pop-post-modal', 'modal_ajax', array(
'url' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'ajax-nonce' )
));
}
add_action( 'wp_enqueue_scripts', 'pop_post_modal_localize_scripts' );
/*
*
Ajax function
*
*/
function fetch_modal_content() {
// verifies the AJAX request
check_ajax_referer( 'ajax-nonce', 'security' );
// Get post id from script
$post_id = $_POST['post_id'];
// Arguments for query
$args = array(
'p' => $post_id,
'post_type' => 'update',
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fa fa-close"></i></button>
</div>
<div id="pop-modal" class="modal fade">
<div class="modal-body <?php post_class('clearfix');?>">
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<div id="modal-featured-image" class="modal-image">
<img class="img-fluid" src="<?php echo get_the_post_thumbnail_url( $post_id ); ?>">
</div>
</div>
<div class="col-sm-4">
<div id="pop-article-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_content(); ?>
</div>
</div>
<div class="col-sm-12">
<footer class="modal-footer cb-article-footer">
<?php
comments_template();
?>
</footer> <!-- end article footer -->
</div>
</div>
</div>
</div> <!-- .modal-body -->
<?php
endwhile;
endif;
wp_reset_postdata();
die();
}
add_action( 'wp_ajax_fetch_modal_content', 'fetch_modal_content' );
add_action( 'wp_ajax_nopriv_fetch_modal_content', 'fetch_modal_content' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment