페이지 하단 부분에 bootstrap의 modal부분을 참고하여 관련 html 소스를 넣는다.

<!-- Modal -->
<div class="modal fade" id="popupModal" tabindex="-1" role="dialog" aria-labelledby="popupModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="popupModalLabel">Modal title</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
			...
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

 

팝업으로 노출할 페이지 생성을 하고 slug는 영문으로 지정 후 팝업 띄우고자 하는 링크 코딩

<a href="#" class="aPopupModal" data-target="#popupModal" data-title="WOW POPUP" data-url="privacy-policy">

위의 부분에서 data-url 부분이 추가된 페이지의 slug 값을 넣어 준다.
 

테마 폴더에 slug 이름과 동일한 page-privacy-policy.php 파일을 생성

<?php
while ( have_posts() ) : the_post();
?>
	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<?php 
		the_title( '<h1 class="entry-title">', '</h1>' );
		the_content();
	?>
	</article>
<? endwhile; ?>

 

마지막으로 javascript 추가

var $modal = $('#popupModal'),
	$aPopupModal = $('.aPopupModal'),
	modalTitle = $modal.find('.modal-title'),
	modalContent = $modal.find('.modal-body');

$aPopupModal.on('click', function(e) {
	if ( e.preventDefault ) {
		e.preventDefault();
	} else {
		e.returnValue = false;
	}
	var $this = $(this),
		$url = $this.data('url'),
		$title = $this.data('title');

	modalTitle.empty();
	modalContent.empty();

	modalTitle.val($title);
	modalContent.load( $url, function(responseTxt, statusTxt, xhr){
		if ( statusTxt === 'success' ) 
			$modal.modal('show');
		if ( statusTxt == 'error' ) {
			console.log("Error: " + xhr.status + ": " + xhr.statusText);
		}
	});
	return false;
});