Skip to content

Commit 673a0a5

Browse files
jlukicjlukic
committed
Update modal docs
1 parent 673c731 commit 673a0a5

2 files changed

Lines changed: 117 additions & 79 deletions

File tree

‎server/documents/hotfix.html.eco‎

100644100755
Lines changed: 52 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -6,95 +6,68 @@ standalone : true
66
title : 'Test Page'
77
type : 'Library'
88
---
9-
<div class="ui container">
10-
<form class="ui form">
11-
<div class="field">
12-
<label>Empty</label>
13-
<input name="empty" type="text">
9+
<button id='btn1'>
10+
show modal 1
11+
</button>
12+
<button id='btn2'>
13+
show modal 2
14+
</button>
15+
<div class="ui modal" id='modal1'>
16+
<i class="close icon"></i>
17+
<div class="header">
18+
Profile Picture
1419
</div>
15-
<div class="field">
16-
<label>Dropdown</label>
17-
<select class="ui dropdown" name="dropdown">
18-
<option value="">Select</option>
19-
<option value="male">Choice 1</option>
20-
<option value="female">Choice 2</option>
21-
</select>
20+
<div class="image content">
21+
<div class="ui medium image">
22+
<img src="/images/avatar/large/chris.jpg">
23+
</div>
24+
<div class="description">
25+
<div class="ui header">We've auto-chosen a profile image for you.</div>
26+
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
27+
<p>Is it okay to use this photo?</p>
28+
</div>
2229
</div>
23-
<div class="inline field">
24-
<div class="ui checkbox">
25-
<input name="checkbox" type="checkbox">
26-
<label>Checkbox</label>
30+
<div class="actions">
31+
<div class="ui black deny button">
32+
Nope
2733
</div>
34+
<div class="ui positive right labeled icon button">
35+
Yep, that's me
36+
<i class="checkmark icon"></i>
37+
</div>
38+
</div>
39+
</div>
40+
<div class="ui modal" id='modal2'>
41+
<i class="close icon"></i>
42+
<div class="header">
43+
Profile Picture
2844
</div>
29-
<div class="inline field">
30-
<div class="ui radio checkbox">
31-
<input name="radio" type="radio">
32-
<label>Radio</label>
45+
<div class="image content">
46+
<div class="ui medium image">
47+
<img src="/images/avatar/large/chris.jpg">
48+
</div>
49+
<div class="description">
50+
<div class="ui header">We've auto-chosen a profile image for you.</div>
51+
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
52+
<p>Is it okay to use this photo?</p>
3353
</div>
34-
<div class="ui radio checkbox">
35-
<input name="radio" type="radio">
36-
<label>Radio</label>
54+
</div>
55+
<div class="actions">
56+
<div class="ui black deny button">
57+
Nope
3758
</div>
38-
<div class="ui radio checkbox">
39-
<input name="radio" type="radio">
40-
<label>Radio</label>
59+
<div class="ui positive right labeled icon button">
60+
Yep, that's me
61+
<i class="checkmark icon"></i>
4162
</div>
4263
</div>
43-
<div class="ui submit button">Submit</div>
44-
<div class="ui error message"></div>
45-
<p style="color:red;">The radio field is validated, but is not included in onFailure field parameter values.</p>
46-
<div class="output"></div>
47-
</form>
4864
</div>
4965
<script>
50-
$(document).ready(function() {$('.ui.form')
51-
.form({
52-
on: 'blur',
53-
onFailure: function(formErrors, fields){
54-
$('.output').html(JSON.stringify(fields));
55-
return false;
56-
},
57-
fields: {
58-
empty: {
59-
identifier : 'empty',
60-
rules: [
61-
{
62-
type : 'empty',
63-
prompt : 'Please enter a value'
64-
}
65-
]
66-
},
67-
dropdown: {
68-
identifier : 'dropdown',
69-
rules: [
70-
{
71-
type : 'empty',
72-
prompt : 'Please select a dropdown value'
73-
}
74-
]
75-
},
76-
checkbox: {
77-
identifier : 'checkbox',
78-
rules: [
79-
{
80-
type : 'checked',
81-
prompt : 'Please check the checkbox'
82-
}
83-
]
84-
},
85-
radio: {
86-
identifier : 'radio',
87-
rules: [
88-
{
89-
type : 'checked',
90-
prompt : 'Please check the radio'
91-
}
92-
]
93-
}
94-
}
95-
})
96-
;
97-
66+
$(document).ready(function() {
67+
$('#modal1').modal({closable: false})
68+
$('#modal2').modal({inverted: true})
69+
$('#btn1').click(function(){$('#modal1').modal('show')})
70+
$('#btn2').click(function(){$('#modal2').modal('show')})
9871

9972
});
10073

‎server/documents/modules/modal.html.eco‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,40 @@ themes : ['Default', 'Material']
178178
</div>
179179
</div>
180180

181+
<div class="ui longer test modal">
182+
<div class="header">
183+
Profile Picture
184+
</div>
185+
<div class="scrolling image content">
186+
<div class="ui medium image">
187+
<img src="/images/wireframe/image.png">
188+
</div>
189+
<div class="description">
190+
<div class="ui header">Modal Header</div>
191+
<p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
192+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
193+
<div class="ui divider"></div>
194+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
195+
<div class="ui divider"></div>
196+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
197+
<div class="ui divider"></div>
198+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
199+
<div class="ui divider"></div>
200+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
201+
<div class="ui divider"></div>
202+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
203+
<div class="ui divider"></div>
204+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
205+
</div>
206+
</div>
207+
<div class="actions">
208+
<div class="ui primary approve button">
209+
Proceed
210+
<i class="right chevron icon"></i>
211+
</div>
212+
</div>
213+
</div>
214+
181215
<div class="ui long test modal">
182216
<div class="header">
183217
Profile Picture
@@ -456,6 +490,27 @@ themes : ['Default', 'Material']
456490
</div>
457491
</div>
458492

493+
<div class="no example">
494+
<h4 class="ui header">
495+
Scrolling Content
496+
<div class="ui teal label">New in 2.2.11</div>
497+
</h4>
498+
<p>A modal can use the entire size of the screen</p>
499+
<div class="code" data-type="html" data-variation="scrolling">
500+
<div class="ui modal">
501+
<div class="header">Header</div>
502+
<div class="scrolling content">
503+
<p>Very long content goes here</p>
504+
</div>
505+
</div>
506+
</div>
507+
<div class="code" data-demo="true">
508+
$('.ui.longer.modal')
509+
.modal('show')
510+
;
511+
</div>
512+
</div>
513+
459514
<h2 class="ui dividing header">States</h2>
460515

461516
<div class="no example">
@@ -481,6 +536,16 @@ themes : ['Default', 'Material']
481536
</div>
482537
</div>
483538

539+
<div class="no example">
540+
<h4 class="ui header">Internally Scrolling Content</h4>
541+
<p>You may prefer to have the content of your modal scroll itself, you can do this by using the <code>scrolling content</code> variation.</p>
542+
<div class="code" data-demo="true">
543+
$('.longer.modal')
544+
.modal('show')
545+
;
546+
</div>
547+
</div>
548+
484549
<div class="no example">
485550
<h4 class="ui header">Multiple Modals</h4>
486551
<p>A modal can open a second modal. If you use <code>allowMultiple: true</code> parameter the second modal will be opened on top of the first modal. Otherwise the modal will be closed before the second modal is opened.</p>

0 commit comments

Comments
 (0)