グッジョブ送信プラグインのお礼をモーダルで表示
龍の棲む場所さんで配布されている「グッジョブ送信ブラグイン」の「お礼画面を表示せずにカウントだけを取得する方法」で表示される「お礼文」をモーダルウィンドウで表示するTIPSです。
準備
- グッジョブ送信プラグイン配布元の解説通りにプラグインを導入
- 管理画面の「設定管理」→「プラグインの設定：グッジョブ送信」の「グッジョブに対するお礼画面の表示」を
- 「表示しない」（すべてのグッジョブ送信ボタンがお礼画面を表示しなくなります）
- または「表示する」のままで直下のテキストエリアにモーダルウィンドウでのお礼表示をしたいページIDを記入
します。
テンプレートファイルの編集
プラグイン配布元の解説にあるように、「お礼画面を表示せずにカウントだけを取得する方法」を使うとグッジョブ送信プラグインで設定したお礼表示ページは表示されず、元のURL?exec=goodjob_insertに遷移するのでテンプレートファイルの任意の場所に
<!--{if $freo.query.exec == 'goodjob_insert'}-->
グッジョブ送信後に表示したい内容
<!--{/if}-->と記述するとグッジョブ送信後にその部分（上記例なら「グッジョブ送信後に表示したい内容」）が表示されます。ここにモーダルウィンドウ表示用記述を書きます。記述する場所は<body>～</body>間ならどこでもいいと思いますが、私はfooter.htmlの</body>直前あたりに入れました。
モーダルウィンドウ表示用HTML
<!--{if $freo.query.exec == 'goodjob_insert'}-->
<div class="modal-container active">
<div class="modal-body">
<div class="modal-close">×</div>
<div class="modal-content">
<p>拍手ありがとうございます</p>
</div>
</div>
</div>
<!--{/if}-->上記コードの<div class="modal-content">～</div>の間に表示したい文章や画像を配置します。ここでは自由にHTMLで記述することができます。
モーダルウィンドウ表示用CSS
/* オーバーレイ背景 */
.modal-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,.6);
padding: 40px 20px;
overflow: auto;
opacity: 0;
visibility: hidden;
transition: .3s;
box-sizing: border-box;
z-index:2;
}
.modal-container:before{
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.modal-container.active{
opacity: 1;
visibility: visible;
}
.modal-body{
position: relative;
display: inline-block;
vertical-align: middle;
max-width: 500px;
width: 90%;
}
/* 閉じるボタン */
.modal-close{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: -40px;
right: -40px;
width: 40px;
height: 40px;
font-size: 40px;
color: #fff;
cursor: pointer;
}
/* お礼表示ボックス */
.modal-content{
background: #fff;
text-align: left;
padding: 30px;
}default.jsの編集
モーダルウィンドウ表示・非表示を操作するjQuery用の記述です。これだけを一つのファイルにして別途読み込む方法でもいいかもしれませんが私はdefault.jsの最後に追記しました。
$(function(){
// 変数に要素を入れる
var close = $('.modal-close'),
container = $('.modal-container');
var url = $(location).attr('href');
var new_url = url.replace(/\?.*$/,"");
//閉じるボタンをクリックしたらモーダルを閉じ、パラメータを削除したURLに戻る
close.on('click',function(){
window.history.replaceState('', '', new_url);
container.removeClass('active');
});
//モーダルの外側をクリックしたらモーダルを閉じ、パラメータを削除したURLに戻る
container.on('click',function(e) {
if(!$(e.target).closest('.modal-body').length) {
window.history.replaceState('', '', new_url);
container.removeClass('active');
}
});
});以上です。個人的にはグローバルナビゲーションに配置したボタンからはモーダルでお礼文表示、記事単体やページに配置したボタンからはお礼画面（ページ）表示という感じに使い分けたかったのですが現状のプラグインの設定だとお礼画面を表示するしないの設定はページIDごとでしかできないようなので設定管理での設定はお礼画面を「表示する」にし、直下のテキストエリアに「default（サイトトップ）」「information（インフォメーション機能のページ）」としてみました（※現在当サイトでは未導入です）。
