最初から出力して非表示にしておき、モーダルとしてそれを表示するのでいいでしょうか?
php
1<a herf="#" class="show-modal">モーダル出現</a>
2<div id="modalwin" class="modalwin hide">
3 <!-- モーダルでカスタム投稿を呼び出す -->
4 <?php
5 $custom_post_id = '7' //出力したいカスタム投稿タイプのIDを指定
6 echo get_post( $custom_post_id )->post_title;
7 ?>
8</div>
css
1.modalwin {
2 position: fixed;
3 width: 600px;
4 background-color: #fff;
5 border-radius: 5px;
6 box-shadow: 0 2px 4px 0 #000;
7 z-index: 1;
8}
9
10.modalwin dl {
11 padding: 0px 10px;
12}
13
14.show {
15 display: block;
16}
17
18.hide {
19 display: none;
20}
21
22.modalwin h1 {
23 background: #ededed;
24 padding: 20px;
25 border-radius: 5px 5px 0 0;
26 font-size: 1.2em;
27 margin-top: 0;
28 text-align: center;
29}
30
31.modalwin-contents {
32 padding: 5px;
33}
34
35.modalwin-contents img {
36 margin: 0 0 1em 0;
37 float: left;
38 width: 30%;
39 height: 30%;
40}
41
42.modalwin-contents p {
43 margin: 0 0 1em 0;
44 line-height: 1.8em;
45}
46
47#shade {
48 position: fixed;
49 left: 0;
50 top: 0;
51 width: 100%;
52 height: 100%;
53 background-color: #999;
54 opacity: 0.9;
55 z-index: 1;
56}
57
58@media screen and (max-width: 600px) {
59 .modalwin {
60 width: 90%;
61 }
62}
js
1$(function () {
2 // モーダルウィンドウを開く
3 function showModal(event) {
4 event.preventDefault();
5
6 var $shade = $('<div></div>');
7 $shade
8 .attr('id', 'shade')
9 .on('click', hideModal);
10
11
12 var $modalWin = $('#modalwin');
13 var $window = $(window);
14 var posX = ($window.width() - $modalWin.outerWidth()) / 2;
15 var posY = ($window.height() - $modalWin.outerHeight()) / 2;
16
17 $modalWin
18 .before($shade)
19 .css({left: posX, top: posY})
20 .removeClass('hide')
21 .addClass('show')
22 .on('click', 'button', function () {
23 hideModal();
24 });
25 }
26
27 function hideModal() {
28 $('#shade').remove();
29 $('#modalwin')
30 .removeClass('show')
31 .addClass('hide');
32 }
33
34 $('.show-modal').on('click', showModal);
35
36}());