SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

vue.js で bootstrapのmodalを表示する(簡易版)

問題

vue.js を使っている環境で、bootstrapのmodalを表示したいです。

答え

modalの表示/非表示をvueでコントロールする場合、bootstrapのJavaScriptは使わないで、bootstrapのCSSだけ利用するようにして、以下のように v-if で制御すると、それっぽくなります。

HTML

<transition name="fade"><!-- transitionは不要なら外してOK -->
<div v-if="sample_modal">
<div class="modal" v-on:click.self="sample_modal=false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">タイトルタイトル</h4>
<button type="button" class="close" v-on:click="sample_modal=false">×</button>
</div>
<div class="modal-body">
<p>ダイアログの中身</p>
<p>ダイアログの中身</p>
<p>ダイアログの中身</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">フッターのボタンなど</button>
</div>
</div>
</div>
</div>
<div class="modal-backdrop show"></div>
</div>
</transition>

CSS

/* 表示/非表示はvueで制御するので最初から表示状態にする */
.modal {
display: block;
}

/* vueのtransitionを使わないなら不要 */
.fade-enter-active, .fade-leave-active {
transition: opacity .15s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}

sample_modal を false にしておけば非表示。

sample_modal を true にすれば表示します。

bootstrap.js に頼らないので、.modalは最初から display:blockにして、.modal-backdrop.show も自分で書いておきます。

.modal につけている v-on:click.self はダイアログの外をクリックしたときに閉じるためです。

コンポーネントとして作らずに、HTMLに書くだけで対応した場合のmodalダイアログでした。

メモ

bootstrapのmodalは、エスケープキーで閉じることも可能だが、上の方法では対応していない。

vueでコントロールするなら、vueでキーイベントも拾ってESCキー押下にも対応する必要がある。

関連するメモ

コメント