jQueryプラグインのmodaal.jsを利用します。レスポンシブ対応で、bodyのスクロールバーは非表示です。html内のソースをidで指定してモーダルウィンドウ内に表示します。
なお利用にはCSSファイルとjsファイルの読み込みが必要です。
<link rel="stylesheet" href="css/modaal.min.css">
<script src="js/modaal.min.js"></script>まず、htmlのコードです。
モーダルウィンドウを開くリンクにaタグを使用し、href属性でモーダルウィンドウのdivタグのidを指定します。aタグを使用しない方法もありますが、基本的にはこの条件でモーダルウィンドウを起動します。またモーダルウィンドウは非表示にする必要がありますが、まとめてクラス名modal-wrap01とmodal-wrap02のdivタグで囲って非表示にしています。モーダルウィンドウ内の閉じるボタンはmodaal.min.js側で必要なクラス名はありません。
<ul>
<li><a class="modal-open01" href="#category01">モーダルウィンドウ01（横幅550px）</a></li>
<li><a class="modal-open01" href="#category02">モーダルウィンドウ02（横幅550px）</a></li>
<li><a class="modal-open01" href="#category03">モーダルウィンドウ03（横幅550px）</a></li>
</ul>
<div class="modal-wrap01">
<div id="category01">
<p class="modal-title">モーダルウィンドウ01：タイトル</p>
<div class="modal-body">
<p>モーダルウィンドウ01：ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="modal-footer">
<button type="button" class="btn">閉じる</button>
</div>
</div>
<div id="category02">
<p class="modal-title">モーダルウィンドウ02：タイトル</p>
<div class="modal-body">
<p>モーダルウィンドウ02：ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="modal-footer">
<button type="button" class="btn">閉じる</button>
</div>
</div>
<div id="category03">
<p class="modal-title">モーダルウィンドウ03：タイトル</p>
<div class="modal-body">
<p>モーダルウィンドウ03：ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="modal-footer">
<button type="button" class="btn">閉じる</button>
</div>
</div>
</div>
<ul>
<li><a class="modal-open02" href="#category04">モーダルウィンドウ04（横幅850px・タイトル太字）</a></li>
<li><a class="modal-open02" href="#category05">モーダルウィンドウ05（横幅850px・タイトル太字）</a></li>
<li><a class="modal-open02" href="#category06">モーダルウィンドウ06（横幅850px・タイトル太字）</a></li>
</ul>
<div class="modal-wrap02">
<div id="category04">
<p class="modal-title">モーダルウィンドウ04：タイトル</p>
<div class="modal-body">
<p>モーダルウィンドウ04：ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="modal-footer">
<button type="button" class="btn">閉じる</button>
</div>
</div>
<div id="category05">
<p class="modal-title">モーダルウィンドウ05：タイトル</p>
<div class="modal-body">
<p>モーダルウィンドウ05：ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="modal-footer">
<button type="button" class="btn">閉じる</button>
</div>
</div>
<div id="category06">
<p class="modal-title">モーダルウィンドウ06：タイトル</p>
<div class="modal-body">
<p>モーダルウィンドウ06：ダミーテキストダミーテキストダミーテキスト</p>
</div>
<div class="modal-footer">
<button type="button" class="btn">閉じる</button>
</div>
</div>
</div>続いてCSSのコードです。
モーダルウィンドウの装飾でmodaal.min.cssの影響を受ける部分をオーバーライトします。自動生成されるクラス名modaal-containerのdivタグはデフォルトでmax-width: 1000px;のため必要な横幅に修正します。ただしjQuery側で横幅を指定しても問題ありません。同じく自動生成されるクラス名modaal-content-containerのdivタグはデフォルトでpadding: 30px;のためpadding: 0;に初期化します。
注意点としてはhtmlに記述したモーダルウィンドウの一番外側のdivタグは、モーダルウィンドウを起動すると消去します。idにcategory01～category06を付与したdivタグです。そのためこのdivタグにCSSを設定しても適用されません。自動生成されるクラス名modaal-containerの方に設定します。
またjQuery側で設定するオプションのcustom_class: ‘title-bold’用のCSSを設定しています。
.modal-wrap01,
.modal-wrap02 {
display: none;
}
.modal-title {
margin: 0;
padding: 1rem;
border-bottom: 1px solid #dee2e6;
}
.title-bold .modal-title {
font-weight: bold;
}
.modal-body {
padding: 1rem;
}
.modal-footer {
display: flex;
justify-content: flex-end;
padding: 1rem;
border-top: 1px solid #dee2e6;
}
.btn {
display: inline-block;
font-weight: 400;
color: #fff;
text-align: center;
vertical-align: middle;
user-select: none;
background: #6c757d;
border: 1px solid #6c757d;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: 0.15s;
opacity: 1;
}
.btn:hover {
background: #5a6268;
border-color: #545b62;
opacity: 0.7;
cursor: pointer;
}
/* modaal.min.css */
.modaal-container {
max-width: 550px;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
}
.modaal-content-container {
padding: 0;
}最後にjQueryのコードです。オプションはGitHubを参照して設定します。
・デフォルトで画面右上に閉じるボタンが表示されるためhide_close: trueで非表示にしています。
・モーダルウィンドウの横幅はwidth: 850で変更しています。自動生成されるクラス名modaal-containerのdivタグにインラインでmax-width: 850px;が設定されます。
・自動生成されるクラス名modaal-containerのdivタグに任意のクラス名を付与するためにcustom_class: ‘title-bold’を設定しています。
・overlay_opacity: ‘0.5’でオーバーレイの透明度を変更しています。
・モーダルウィンドウ内の閉じるボタンにクリック時の動作で、対象のモーダルウィンドウを閉じる設定をします。
$(function() {
$('.modal-open01').modaal({
hide_close: true
});
$('.modal-open02').modaal({
width: 850,
hide_close: true,
custom_class: 'title-bold',
overlay_opacity: '0.5'
});
$('.modal-wrap01 button').on('click', function() {
$('.modal-open01').modaal('close');
});
$('.modal-wrap02 button').on('click', function() {
$('.modal-open02').modaal('close');
});
});