モーダルは、Webアプリケーションでポップアップウィンドウを表示するための重要な要素です。Vue.jsを使用すると、モーダルを簡単に作成できます。この記事では、Vue.jsを使ってモーダルを作成するステップバイステップの方法を紹介します。初心者でも理解しやすいように説明します。
ステップ1: Vue.jsの導入
まず、Vue.jsをプロジェクトに導入する必要があります。以下のコードをHTMLファイルに追加して、Vue.jsを読み込みます。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>ステップ2: HTML構造
モーダルを表示するために、HTMLにモーダル用の要素を追加します。
<div id="app">
<button @click="showModal">モーダルを開く</button>
<div v-if="isModalOpen" class="modal">
<div class="modal-content">
<!-- モーダルのコンテンツをここに配置 -->
<button @click="closeModal">閉じる</button>
</div>
</div>
</div>ステップ3: Vueインスタンスの作成
Vue.jsを使用してモーダルを制御するために、Vueインスタンスを作成します。
new Vue({
el: '#app',
data: {
isModalOpen: false
},
methods: {
showModal() {
this.isModalOpen = true;
},
closeModal() {
this.isModalOpen = false;
}
}
});ステップ4: CSSスタイル
モーダルにスタイルを適用するためのCSSを追加します。以下は簡単な例です。
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}サンプル
See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
(Visited 50 times, 1 visits today)