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

編集履歴

質問編集履歴

7

追記を改めました

2018/05/14 03:35

投稿

Dongrill
Dongrill

スコア19

test CHANGED
File without changes
test CHANGED
@@ -64,33 +64,59 @@
64
64
 
65
65
 
66
66
 
67
- function myFunction() {
68
67
 
68
+
69
+
70
+
71
+
72
+
73
+ <script>
74
+
75
+ $('.modal').modaal({
76
+
77
+ });
78
+
79
+ </script>
80
+
81
+ <script>
82
+
69
- $('#date_box').pickadate({
83
+ $('#date_box').pickadate({
70
84
 
71
85
  format: 'yyyy/mm/dd'
72
86
 
73
87
  });
74
88
 
89
+ </script>
90
+
91
+ ```
92
+
93
+ ```html
94
+
95
+ ※追記（正常に動作）
96
+
97
+ <script>
98
+
99
+ function myFunction(){
100
+
101
+ $('#date_box').pickadate({
102
+
103
+ format: 'yyyy/mm/dd'
104
+
105
+ });
106
+
75
107
  }
76
108
 
77
-
109
+ $('.modal').modaal({
78
110
 
79
- $('.modal').modaal({
111
+ after_open:myFunction
80
112
 
81
- after_open: myFunction
82
-
83
- });
113
+ });
84
-
85
-
86
114
 
87
115
 
88
116
 
89
-
117
+ </script>
90
118
 
91
119
  ```
92
-
93
-
94
120
 
95
121
  ### 試したこと
96
122
 

6

解決。

2018/05/14 03:35

投稿

Dongrill
Dongrill

スコア19

test CHANGED
File without changes
test CHANGED
@@ -64,24 +64,6 @@
64
64
 
65
65
 
66
66
 
67
- <script>
68
-
69
- $('.modal').modaal({
70
-
71
- after_open: myFunction
72
-
73
- });
74
-
75
- </script>
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
- <script>
84
-
85
67
  function myFunction() {
86
68
 
87
69
  $('#date_box').pickadate({
@@ -92,9 +74,19 @@
92
74
 
93
75
  }
94
76
 
77
+
78
+
79
+ $('.modal').modaal({
80
+
81
+ after_open: myFunction
82
+
83
+ });
84
+
85
+
95
86
 
96
87
 
97
- </script>
88
+
89
+
98
90
 
99
91
  ```
100
92
 

5

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

2018/05/14 02:43

投稿

Dongrill
Dongrill

スコア19

test CHANGED
File without changes
test CHANGED
@@ -66,19 +66,31 @@
66
66
 
67
67
  <script>
68
68
 
69
- $('.modaal').modaal();
69
+ $('.modal').modaal({
70
+
71
+ after_open: myFunction
72
+
73
+ });
70
74
 
71
75
  </script>
76
+
77
+
78
+
79
+
72
80
 
73
81
 
74
82
 
75
83
  <script>
76
84
 
77
- $('#date_box').pickadate({
85
+ function myFunction() {
78
86
 
79
- format: 'yyyy/mm/dd'
87
+ $('#date_box').pickadate({
80
88
 
89
+ format: 'yyyy/mm/dd'
90
+
81
- });
91
+ });
92
+
93
+ }
82
94
 
83
95
 
84
96
 

4

urlの追加

2018/05/14 02:41

投稿

Dongrill
Dongrill

スコア19

test CHANGED
File without changes
test CHANGED
@@ -14,9 +14,9 @@
14
14
 
15
15
 
16
16
 
17
- pickadate.js公式：<a href="http://amsul.ca/pickadate.js/"></a>
17
+ [pickadate.js公式](http://amsul.ca/pickadate.js/)
18
18
 
19
- modaal公式：https://github.com/humaan/Modaal
19
+ [modaal公式](https://github.com/humaan/Modaal)
20
20
 
21
21
 
22
22
 

3

link

2018/05/13 16:32

投稿

Dongrill
Dongrill

スコア19

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- pickadate.js公式：http://amsul.ca/pickadate.js/
17
+ pickadate.js公式：<a href="http://amsul.ca/pickadate.js/"></a>
18
18
 
19
19
  modaal公式：https://github.com/humaan/Modaal
20
20
 

2

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

2018/05/13 16:30

投稿

Dongrill
Dongrill

スコア19

test CHANGED
File without changes
test CHANGED
@@ -11,6 +11,12 @@
11
11
  z-indexなど色々調べたのですが解決できませんでしたので、ご回答のほどよろしくお願いします。
12
12
 
13
13
  ちなみに使用しているモーダルはmodaal最新版です。
14
+
15
+
16
+
17
+ pickadate.js公式：http://amsul.ca/pickadate.js/
18
+
19
+ modaal公式：https://github.com/humaan/Modaal
14
20
 
15
21
 
16
22
 

1

情報の追記

2018/05/13 16:30

投稿

Dongrill
Dongrill

スコア19

test CHANGED
File without changes
test CHANGED
@@ -5,6 +5,8 @@
5
5
  モーダル上でinputをクリックしたらpickadate.jsによってカレンダーが表示されるという機能。
6
6
 
7
7
  モーダル上でなければカレンダーは表示されるのですが、モーダル上ではカレンダーが表示されません。
8
+
9
+ （つまりmodaalは正常に機能するがpickadate.jsは機能しない。）
8
10
 
9
11
  z-indexなど色々調べたのですが解決できませんでしたので、ご回答のほどよろしくお願いします。
10
12
 
@@ -30,7 +32,7 @@
30
32
 
31
33
  ```html
32
34
 
33
- <div id="modaal" style="display:none;">
35
+ <div class="modaal" style="display:none;">
34
36
 
35
37
 
36
38
 
@@ -58,7 +60,7 @@
58
60
 
59
61
  <script>
60
62
 
61
- $('.modal').modaal();
63
+ $('.modaal').modaal();
62
64
 
63
65
  </script>
64
66