Skip to content

Commit 8949ce5

Browse files
wuda-iowuda-io
committed
docs(modal): use popover instead of dialog
1 parent 92c5ff5 commit 8949ce5

1 file changed

Lines changed: 31 additions & 52 deletions

File tree

‎src/modals.html‎

Lines changed: 31 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,22 @@
1313
<div id="introduction" class="section scrollspy">
1414
<p class="caption">
1515
Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link
16-
of the trigger. To add a close button, just add the class
17-
<code class="language-css">.modal-close</code> to your button.
16+
of the trigger.
1817
<div class="red-text">Upgrade > 2.1.1<br>
1918
<ul>
20-
<li>1. search all elements with class="modal" and change the tagName to dialog</li>
21-
<li>2. add <xmp><div class="modal-header"></div></xmp> in front of the modal-content element and place title stuff in there if needed.</li>
22-
<li>3. replace data-target and triggers with onclick event handlers like "id.showModal()" for non-dimissible and "element.show()" for dismissible dialogs.</li>
23-
<li>4. replace close-triggers with onclick event handlers "id.close()"</li>
19+
<li>1. search all elements with class="modal" and add "popover" attribute</li>
20+
<li>2. replace `data-target="id"` with `popovertarget="id"`.</li>
21+
<li>3. replace close-triggers with `popovertarget="id"` (toggle)</li>
2422
</ul>
2523
</div>
2624
</p>
2725

28-
<button class="btn tonal waves-effect waves-light" onclick="modal1.showModal()">Show</button>
29-
<button class="btn tonal waves-effect waves-light" onclick="modal1.show()">Show (dismissible)</button>
30-
<button class="btn tonal waves-effect waves-light" onclick="modal2.showModal()">Show with long content</button>
26+
<button class="btn tonal waves-effect waves-light" popovertarget="modal1">Show</button>
27+
<button class="btn tonal waves-effect waves-light" popovertarget="modal2">Show with long content</button>
28+
<a class="btn tonal waves-effect waves-light" href="javascript:modal3.showPopover()">Show BottomSheet Modal via a-tag</a>
3129

3230
<!-- Modal 1 -->
33-
<dialog id="modal1" class="modal">
31+
<div id="modal1" class="modal" popover>
3432
<div class="modal-header">
3533
<h4>Modal Header</h4>
3634
</div>
@@ -42,13 +40,13 @@ <h4>Modal Header</h4>
4240
</p>
4341
</div>
4442
<div class="modal-footer">
45-
<button tabindex="0" class="btn text waves-effect" onclick="modal1.close()">Disagree</button>
46-
<button tabindex="0" class="btn text waves-effect" onclick="modal1.close()">Agree</button>
43+
<button tabindex="0" class="btn text waves-effect" popovertarget="modal1">Disagree</button>
44+
<button tabindex="0" class="btn text waves-effect" popovertarget="modal1">Agree</button>
4745
</div>
48-
</dialog>
46+
</div>
4947

5048
<!-- Modal 2 (Fixed Footer) -->
51-
<dialog id="modal2" class="modal">
49+
<div id="modal2" class="modal" popover>
5250
<div class="modal-header">
5351
<h4>Modal Header</h4>
5452
</div>
@@ -98,10 +96,10 @@ <h4>Modal Header</h4>
9896
<button tabindex="0" class="btn text waves-effect" onclick="modal2.close()">Disagree</button>
9997
<button tabindex="0" class="btn text waves-effect" onclick="modal2.close()">Agree</button>
10098
</div>
101-
</dialog>
99+
</div>
102100

103101
<!-- Modal 3 (Bottom Sheet) -->
104-
<dialog id="modal3" class="modal bottom-sheet">
102+
<div id="modal3" class="modal bottom-sheet" popover>
105103
<div class="modal-header">
106104
<h3 class="header">Modal Header</h3>
107105
</div>
@@ -141,39 +139,27 @@ <h3 class="header">Modal Header</h3>
141139
</li>
142140
</ul>
143141
</div>
144-
</dialog>
142+
</div>
145143
<!---->
146144
</div>
147145

148146
<pre><code class="language-html">
149-
<xmp>
150-
<!-- Modal Trigger -->
151-
<button class="btn waves-effect waves-light" onclick="modal1.showModal()">Show Modal</button>
152-
<!-- Modal Structure -->
153-
<dialog id="modal1" class="modal">
147+
<xmp><button class="btn waves-effect waves-light" popovertarget="modal1">Show</button>
148+
<a class="btn tonal" href="javascript:modal1.showPopover()">Show via Link</a>
149+
150+
<div id="modal1" class="modal" popover>
154151
<div class="modal-header">
155152
<h4>Modal Header</h4>
156153
</div>
157154
<div class="modal-content">
158155
<p>A bunch of text</p>
159156
</div>
160157
<div class="modal-footer">
161-
<a href="#!" tabindex="0" class="modal-close waves-effect btn-flat">Agree</a>
158+
<button tabindex="0" class="waves-effect btn-flat" popovertarget="modal1">Agree</button>
162159
</div>
163-
</dialog>
164-
</xmp>
165-
</code></pre>
166-
167-
<div id="button-trigger" class="scrollspy section">
168-
<h3 class="header">Modals with Button trigger</h3>
169-
<p>You can open the modal by id with <code class="language-html">modal1.showModal()</code> where modal1 is the ElementId.</p>
170-
<pre><code class="language-html">
171-
<xmp>
172-
<!-- Modal Trigger -->
173-
<button class="btn" onclick="modal1.showModal()">Show Modal</button>
160+
</div>
174161
</xmp>
175162
</code></pre>
176-
</div>
177163

178164
<div id="initialization" class="scrollspy section">
179165
<h3 class="header">Initialization</h3>
@@ -204,17 +190,13 @@ <h3 class="header">Methods</h3>
204190
<pre><code class="language-javascript col s12">const modal = document.querySelector('#modal-1');</code></pre>
205191
</blockquote>
206192

207-
<h5 class="method-header">.show();</h5>
193+
<h5 class="method-header">.showPopover();</h5>
208194
<p>Open dismissible</p>
209-
<pre><code class="language-javascript col s12">modal.show();</code></pre>
195+
<pre><code class="language-javascript col s12">modal.showPopover();</code></pre>
210196

211-
<h5 class="method-header">.showModal();</h5>
212-
<p>Open non-dismissible</p>
213-
<pre><code class="language-javascript col s12">modal.showModal();</code></pre>
214-
215-
<h5 class="method-header">.close();</h5>
197+
<h5 class="method-header">.hidePopover();</h5>
216198
<p>Close</p>
217-
<pre><code class="language-javascript col s12">modal.close();</code></pre>
199+
<pre><code class="language-javascript col s12">modal.hidePopover();</code></pre>
218200
</div>
219201

220202
<div id="properties" class="scrollspy section">
@@ -231,29 +213,27 @@ <h3 class="header">Properties</h3>
231213
<tr>
232214
<td>-</td>
233215
<td>-</td>
234-
<td>See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog">Html spec</a> for more details.</td>
216+
<td>Check out the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API" target="_blank">Popover API</a> for more details.</td>
235217
</tr>
236218
</tbody>
237219
</table>
238220
</div>
239221

240222
<div id="bottom-sheet" class="scrollspy section">
241223
<h3 class="header">Bottom Sheet Modals</h3>
242-
<button class="btn tonal waves-effect waves-light" onclick="modal3.showModal()">Show BottomSheet-Modal</button>
224+
<button class="btn tonal waves-effect waves-light" popovertarget="modal3">Show BottomSheet-Modal</button>
243225
<p>Bottom Sheet Modals are good for displaying actions to the user on the bottom of a screen. They still act the same as regular modals.</p>
244226
<pre><code class="language-html">
245-
<xmp>
246-
<!-- Modal Trigger -->
247-
<a class="btn tonal waves-effect waves-light" href="#" onclick="modal1.showModal(); return false;">Show BottomSheet Modal</a>
248-
<!-- Modal Structure -->
249-
<dialog id="modal1" class="modal bottom-sheet">
227+
<xmp><a class="btn tonal waves-effect waves-light" href="javascript:modal1.showPopover()">Show BottomSheet Modal</a>
228+
229+
<div id="modal1" class="modal bottom-sheet" popover>
250230
<div class="modal-header">
251231
<h4>Modal Header</h4>
252232
</div>
253233
<div class="modal-content">
254234
<p>A bunch of text</p>
255235
</div>
256-
</dialog>
236+
</div>
257237
</xmp>
258238
</code></pre>
259239
</div>
@@ -265,7 +245,6 @@ <h4>Modal Header</h4>
265245
<div style="height: 1px">
266246
<ul class="section table-of-contents">
267247
<li><a href="#introduction">Introduction</a></li>
268-
<li><a href="#button-trigger">Button Trigger</a></li>
269248
<li><a href="#initialization">Initialization</a></li>
270249
<li><a href="#options">Options</a></li>
271250
<li><a href="#methods">Methods</a></li>

0 commit comments

Comments
 (0)