1.0.24 • Published 2 years ago
bootstrap-remote-modal v1.0.24
bootstrap-remote-modal
bootstrapでリモートコンテンツをModal表示するユーティリティです。 offcanvasにも対応しています。
使い方
呼び出し元
<a href="remote.html" data-bs-toggle="remote-modal">text</a>
呼び出される側(modal)
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
modal contents
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
呼び出される側(offcanvas)
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false">
<div class="offcanvas-header">
<h5 class="offcanvas-title">title</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>body</p>
</div>
</div>
呼び出される側のコンテンツ
modalクラスがある場合
modal表示します。コンテンツ内のform送信やリンクは、remote-modal内で表示されるように調節されます。
offcanvasクラスがある場合
offcanvas表示します。コンテンツ内のform送信やリンクは、remote-modal内で表示されるように調節されます。
modalもoffcanvasクラスもない場合
modal/offcanvasを非表示にして、bodyタグの内容を入れ替えます。
1.0.22
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.20
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago