回答編集履歴

1

試したHTMLも追記

2017/07/20 14:25

投稿

rururu3
rururu3

スコア5545

test CHANGED
@@ -33,3 +33,161 @@
33
33
 
34
34
 
35
35
  にしてできませんか?
36
+
37
+
38
+
39
+ ※試したHTML載せておきます
40
+
41
+ ```html
42
+
43
+ <!doctype html>
44
+
45
+ <html lang="en">
46
+
47
+ <head>
48
+
49
+ <meta charset="utf-8">
50
+
51
+ <!--
52
+
53
+ -->
54
+
55
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.4.2/css/onsenui.min.css" />
56
+
57
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.4.2/css/onsen-css-components.min.css" />
58
+
59
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.4.2/js/onsenui.js"></script>
60
+
61
+ <script src="https://unpkg.com/vue"></script>
62
+
63
+ <script src="https://unpkg.com/vue-onsenui@2.0.2"></script>
64
+
65
+ <!--
66
+
67
+ <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
68
+
69
+ <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
70
+
71
+ -->
72
+
73
+ </head>
74
+
75
+ <body>
76
+
77
+ <ons-navigator id="myNavigator" page="sample.html"></ons-navigator>
78
+
79
+
80
+
81
+ <ons-template id="sample.html">
82
+
83
+ <ons-page>
84
+
85
+ <ons-toolbar>
86
+
87
+ <div class="right">
88
+
89
+ <ons-toolbar-button onclick="showdlg1()">
90
+
91
+ <ons-icon icon="ion-plus"></ons-icon>
92
+
93
+ </ons-toolbar-button>
94
+
95
+ </div>
96
+
97
+ </ons-toolbar>
98
+
99
+ </ons-page>
100
+
101
+ </ons-template>
102
+
103
+
104
+
105
+ <ons-template id="dialog1.html">
106
+
107
+ <ons-dialog id="dialog1" cancelable>
108
+
109
+ <ons-toolbar inline>
110
+
111
+ <label class="center">追加</label>
112
+
113
+ <div class="right">
114
+
115
+ <ons-toolbar-button modifier="quiet" onclick="hidedlg1()">
116
+
117
+ 完了
118
+
119
+ </ons-toolbar-button>
120
+
121
+ </div>
122
+
123
+ </ons-toolbar>
124
+
125
+ <div style="text-align: center">
126
+
127
+ <p>
128
+
129
+ <ons-input modifier="underbar" placeholder="hoge"></ons-input>
130
+
131
+ </p>
132
+
133
+ </div>
134
+
135
+ </ons-dialog>
136
+
137
+ </ons-template>
138
+
139
+
140
+
141
+ <!--
142
+
143
+ <div id="app">
144
+
145
+ </div>
146
+
147
+ -->
148
+
149
+
150
+
151
+ </body>
152
+
153
+ <script>
154
+
155
+ ons.ready(function() {
156
+
157
+ });
158
+
159
+ function showdlg1() {
160
+
161
+ var dialog1 = document.getElementById('dialog1')
162
+
163
+ if(dialog1) {
164
+
165
+ dialog1.show();
166
+
167
+ }
168
+
169
+ else {
170
+
171
+ ons.createDialog('dialog1.html').then(function(dialog1) {
172
+
173
+ dialog1.show();
174
+
175
+ });
176
+
177
+ }
178
+
179
+ };
180
+
181
+ function hidedlg1() {
182
+
183
+ dialog1.hide();
184
+
185
+ };
186
+
187
+
188
+
189
+ </script>
190
+
191
+ </html>
192
+
193
+ ```