前提・実現したいこと
モーダル上でinputをクリックしたらpickadate.jsによってカレンダーが表示されるという機能。
モーダル上でなければカレンダーは表示されるのですが、モーダル上ではカレンダーが表示されません。
(つまりmodaalは正常に機能するがpickadate.jsは機能しない。)
z-indexなど色々調べたのですが解決できませんでしたので、ご回答のほどよろしくお願いします。
ちなみに使用しているモーダルはmodaal最新版です。
発生している問題・エラーメッセージ
モーダル上でカレンダーが表示されない(モーダル上以外では正常に作動する)。
該当のソースコード
html
1<div class="modaal" style="display:none;"> 2 3<form action="" method="post" enctype="multipart/form-data"> 4 <dl> 5 <dt>日付<span class="hissu">必須</span></dt> 6 <dd><input type="text" class="datepicker" id="date_box" name="xxx" value="xxx"></dd> 7 </dl> 8 <input type="submit" id="login" name="login" value="確認して作成"> 9</form> 10 11</div> 12 13 14 15 16 17<script> 18$('.modal').modaal({ 19}); 20</script> 21<script> 22$('#date_box').pickadate({ 23 format: 'yyyy/mm/dd' 24 }); 25</script>
html
1※追記(正常に動作) 2<script> 3function myFunction(){ 4 $('#date_box').pickadate({ 5 format: 'yyyy/mm/dd' 6 }); 7} 8$('.modal').modaal({ 9 after_open:myFunction 10}); 11 12</script>
試したこと
検証ツールを使用してのz-indexやopacityの変更を含めた試行錯誤
補足情報(FW/ツールのバージョンなど)
jQuery3.2.1
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー