Q&A
Vue.jsのほうですよね。タグに追加しておいてください。
以下のソースでボタンを押下してもモーダル機能が動きません。
idで紐づいてるしjsも読み込んでるはずなのですが、、
すみません分かるかた、ご教授いただけないでしょうか。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> 7 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> 8 <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script> 9 <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script> 10 <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> 11</head> 12 13<body> 14 15 <div class="col-md-12"> 16 <!-- 休憩入力 --> 17 <button type="button" class="btn btn-secondary custom-btn-in" data-toggle="modal" data-target="#exampleModal">休憩入力</button> 18 19 <!-- モーダルウィンドウ外枠 --> 20 <div class="modal fade" id="exampleModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 21 <!-- モーダルダイアログ本体 --> 22 <div class="modal-dialog" role="document"> 23 <!-- モーダルのコンテンツ部分 --> 24 <div class="modal-content"> 25 <!-- モーダルのヘッダー --> 26 <div class="modal-header"> 27 <!-- モーダルのタイトル --> 28 <h5 class="modal-title" id="exampleModalLabel" >休憩時間を入力してください。</h5> 29 <!-- 閉じるアイコン --> 30 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 31 <span aria-hidden="true">×</span> 32 </button> 33 </div> 34 <!-- モーダルの本文 --> 35 <div class="modal-body"> 36 <div class="form-group"> 37 <label for="breakTimeTo">休憩開始時間</label> 38 <input type="text" name="breakTimeFrom" class="col-3 form-control" id="breakTimeTo" placeholder="13:00" /> 39 </div> 40 <div class="form-group"> 41 <label for="breakTimeTo">休憩終了時間</label> 42 <input type="text" name="breakTimeTo" class="col-3 form-control" id="breakTimeTo" placeholder="13:00" /> 43 </div> 44 </div> 45 <!-- モーダルのフッター --> 46 <div class="modal-footer"> 47 <button type="button" class="btn btn-primary">変更を保存</button> 48 <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> 49 </div> 50 </div> 51 </div> 52 </div> 53 </div> 54</body> 55</html>
補足
bootstarpVueの実装方法も試しましたがこのソースの場合だと
そもそもボタンの形成もされませんでした、、
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> 7 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> 8 <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CMutationObserver" crossorigin="anonymous"></script> 9 <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script> 10 <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> 11</head> 12 13<body> 14 <div> 15 <b-button v-b-modal.modal-1>Launch demo modal</b-button> 16 17 <b-modal id="modal-1" title="BootstrapVue"> 18 <p class="my-4">Hello from modal!</p> 19 </b-modal> 20 </div> 21</body> 22</html>
回答1件
0
ベストアンサー
bootstrap4側のモーダルを使用する場合は、bootstrap.jsを読み込んでください。このコードではbootstrap-vue.min.jsを読み込んでいます。
また、ボタンのdata-target="#exampleModal"と本体のid="exampleModel"が、id名のスペルミスで等しくありませんので#exampleModalへと変えてください。
bootstarpVue側のモーダルを使用する場合はbodyを閉じる前に下記のscriptを追加してください。
javascript
1<script> 2var app = new Vue({ 3 el: 'body > div' 4}); 5</script>
投稿2019/05/28 04:33
総合スコア21
あなたの回答
tips
プレビュー
