Show users a pop-up modal when they reach a new rank (promoted) using myCRED.

Simple myCRED Promotion Modal

/**
 * Step 1. Catch Promotions
 * @version 1.0
 */
add_action( 'mycred_user_got_promoted', 'mycred_pro_catch_promotions', 10, 2 );
function mycred_pro_catch_promotions( $user_id, $rank_id ) {
	// Save a temporary marker for this user so on the next page load
	// the popup modal is shown
	update_user_meta( $user_id, 'show_promotion_box', $rank_id );
}

/**
 * Step 2. Enque Scripts
 * Next we need to check if we should enqueue jQuery Dialog.
 * There is no need to laod this on every single page, only
 * if it is required.
 * @version 1.0
 */
add_action( 'mycred_front_enqueue', 'mycred_pro_enqueue_modal_script' );
function mycred_pro_enqueue_modal_script() {
	if ( is_user_logged_in() ) {
		$user_id = get_current_user_id();
		$rank = get_user_meta( $user_id, 'show_promotion_box', true );
		if ( $rank == '' ) return;

		wp_enqueue_script( 'jquery-ui-dialog' );
	}
}

/**
 * Load Promotion Modal
 * @version 1.0
 */
add_action( 'wp_footer', 'mycred_pro_load_promotion_modal' );
function mycred_pro_load_promotion_modal() {
	if ( is_user_logged_in() ) {
		$user_id = get_current_user_id();
		$rank_post_id = get_user_meta( $user_id, 'show_promotion_box', true );
		if ( $rank_post_id == '' ) return;

		// Now that we are about to show the modal, remove the marker
		// so it is only shown once (and keep the db clean)
		delete_user_meta( $user_id, 'show_promotion_box' ); ?>

<!-- Change the content to suit your needs -->
<div id="dialog-message">
	<h1>You have just been promoted!</h1>
	<h3>Congratulations! You have just reached the <?php echo get_the_title( $rank_post_id ); ?> rank!</h3>
</div>
<script type="text/javascript">
$(function() {
	$( "#dialog-message" ).dialog({
		modal: true,
		width: 500,
		minHeight: 200
	});
});
</script>
<?php
	}
}

Hi, thanks for this code.

Please can I ask if you can help me to style it, so the modal popup show in the centre of the page instead of in the footer as text.

What code do I need to place and where?

Please.