teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問モーダル上でカレンダーが表示されない。

編集履歴

質問編集履歴

7

追記を改めました

2018/05/14 03:35

投稿

Dongrill
Dongrill

スコア19

title CHANGED
File without changes
body CHANGED
@@ -31,20 +31,33 @@
31
31
  </div>
32
32
 
33
33
 
34
+
35
+
36
+
37
+ <script>
38
+ $('.modal').modaal({
39
+ });
34
- function myFunction() {
40
+ </script>
41
+ <script>
35
- $('#date_box').pickadate({
42
+ $('#date_box').pickadate({
36
43
  format: 'yyyy/mm/dd'
37
44
  });
45
+ </script>
46
+ ```
47
+ ```html
48
+ ※追記（正常に動作）
49
+ <script>
50
+ function myFunction(){
51
+ $('#date_box').pickadate({
52
+ format: 'yyyy/mm/dd'
53
+ });
38
54
  }
39
-
40
- $('.modal').modaal({
55
+ $('.modal').modaal({
41
- after_open: myFunction
56
+ after_open:myFunction
42
- });
57
+ });
43
-
44
58
 
45
-
59
+ </script>
46
60
  ```
47
-
48
61
  ### 試したこと
49
62
 
50
63
  検証ツールを使用してのz-indexやopacityの変更を含めた試行錯誤

6

解決。

2018/05/14 03:35

投稿

Dongrill
Dongrill

スコア19

title CHANGED
File without changes
body CHANGED
@@ -31,22 +31,18 @@
31
31
  </div>
32
32
 
33
33
 
34
- <script>
34
+ function myFunction() {
35
+ $('#date_box').pickadate({
36
+ format: 'yyyy/mm/dd'
37
+ });
38
+ }
39
+
35
40
  $('.modal').modaal({
36
41
  after_open: myFunction
37
42
  });
38
- </script>
39
43
 
40
44
 
41
45
 
42
- <script>
43
- function myFunction() {
44
- $('#date_box').pickadate({
45
- format: 'yyyy/mm/dd'
46
- });
47
- }
48
-
49
- </script>
50
46
  ```
51
47
 
52
48
  ### 試したこと

5

modaalのオプションであるafter_openを書き換えました

2018/05/14 02:43

投稿

Dongrill
Dongrill

スコア19

title CHANGED
File without changes
body CHANGED
@@ -32,13 +32,19 @@
32
32
 
33
33
 
34
34
  <script>
35
- $('.modaal').modaal();
35
+ $('.modal').modaal({
36
+ after_open: myFunction
37
+ });
36
38
  </script>
39
+
37
40
 
41
+
38
42
  <script>
43
+ function myFunction() {
39
- $('#date_box').pickadate({
44
+ $('#date_box').pickadate({
40
- format: 'yyyy/mm/dd'
45
+ format: 'yyyy/mm/dd'
41
- });
46
+ });
47
+ }
42
48
 
43
49
  </script>
44
50
  ```

4

urlの追加

2018/05/14 02:41

投稿

Dongrill
Dongrill

スコア19

title CHANGED
File without changes
body CHANGED
@@ -6,8 +6,8 @@
6
6
  z-indexなど色々調べたのですが解決できませんでしたので、ご回答のほどよろしくお願いします。
7
7
  ちなみに使用しているモーダルはmodaal最新版です。
8
8
 
9
- pickadate.js公式：<a href="http://amsul.ca/pickadate.js/"></a>
9
+ [pickadate.js公式](http://amsul.ca/pickadate.js/)
10
- modaal公式：https://github.com/humaan/Modaal
10
+ [modaal公式](https://github.com/humaan/Modaal)
11
11
 
12
12
 
13
13
  ### 発生している問題・エラーメッセージ

3

link

2018/05/13 16:32

投稿

Dongrill
Dongrill

スコア19

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  z-indexなど色々調べたのですが解決できませんでしたので、ご回答のほどよろしくお願いします。
7
7
  ちなみに使用しているモーダルはmodaal最新版です。
8
8
 
9
- pickadate.js公式：http://amsul.ca/pickadate.js/
9
+ pickadate.js公式：<a href="http://amsul.ca/pickadate.js/"></a>
10
10
  modaal公式：https://github.com/humaan/Modaal
11
11
 
12
12
 

2

プラグインの配布元url追加

2018/05/13 16:30

投稿

Dongrill
Dongrill

スコア19

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,10 @@
6
6
  z-indexなど色々調べたのですが解決できませんでしたので、ご回答のほどよろしくお願いします。
7
7
  ちなみに使用しているモーダルはmodaal最新版です。
8
8
 
9
+ pickadate.js公式：http://amsul.ca/pickadate.js/
10
+ modaal公式：https://github.com/humaan/Modaal
9
11
 
12
+
10
13
  ### 発生している問題・エラーメッセージ
11
14
  モーダル上でカレンダーが表示されない（モーダル上以外では正常に作動する）。
12
15
 

1

情報の追記

2018/05/13 16:30

投稿

Dongrill
Dongrill

スコア19

title CHANGED
File without changes
body CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  モーダル上でinputをクリックしたらpickadate.jsによってカレンダーが表示されるという機能。
4
4
  モーダル上でなければカレンダーは表示されるのですが、モーダル上ではカレンダーが表示されません。
5
+ （つまりmodaalは正常に機能するがpickadate.jsは機能しない。）
5
6
  z-indexなど色々調べたのですが解決できませんでしたので、ご回答のほどよろしくお願いします。
6
7
  ちなみに使用しているモーダルはmodaal最新版です。
7
8
 
@@ -14,7 +15,7 @@
14
15
  ### 該当のソースコード
15
16
 
16
17
  ```html
17
- <div id="modaal" style="display:none;">
18
+ <div class="modaal" style="display:none;">
18
19
 
19
20
  <form action="" method="post" enctype="multipart/form-data">
20
21
  <dl>
@@ -28,7 +29,7 @@
28
29
 
29
30
 
30
31
  <script>
31
- $('.modal').modaal();
32
+ $('.modaal').modaal();
32
33
  </script>
33
34
 
34
35
  <script>