1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'modals'
- var parent = 'components'
- var title = 'Modals - Components - Spectre.css CSS Framework'
- var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
block docs-content
+docs-heading('modals', 'Modals')
include ../_layout/_ad-g.pug
p Modals are flexible dialog prompts.
.docs-demo.columns
.column
a.btn.btn-primary(href="#example-modal-1") Open Modal
#example-modal-1.modal
a.modal-overlay(href="#modals" aria-label="Close")
.modal-container(role="document")
.modal-header
a.btn.btn-clear.float-right(href="#modals" aria-label="Close")
.modal-title.h5 Modal title
.modal-body
.content
p This is the content inside the modal.
h4 Lorem ipsum
p
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
p
| Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
h4 Cupcake ipsum
p
| Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
p
| De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
h4 Candy ipsum
p
| Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
p
| Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
.modal-footer
button.btn.btn-primary Share
a.btn.btn-link(href="#modals") Close
p
| Add a container element with the #[code modal] class.
| And add a real container #[code modal-container] and overlay #[code modal-overlay] inside it.
| You can add child elements with the #[code modal-header], #[code modal-body] and #[code modal-footer] - any or all of them.
p
| Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals.
| To make a modal appear, add the #[code active] class to the #[code modal] container.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="modal active" id="modal-id">
<a href="#close" class="modal-overlay" aria-label="Close"></a>
<div class="modal-container">
<div class="modal-header">
<a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
<div class="modal-title h5">Modal title</div>
</div>
<div class="modal-body">
<div class="content">
<!-- content here -->
</div>
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
+docs-subheading('modals-sizes', 'Modal sizes')
.docs-demo.columns
.column.col-6.col-xs-12
a.btn.btn-primary(href="#example-modal-2") Open small size Modal
#example-modal-2.modal.modal-sm
a.modal-overlay(href="#modals-sizes" aria-label="Close")
.modal-container(role="document")
.modal-header
a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close")
.modal-title.h5 Modal title
.modal-body
.content
form
.form-group
label.form-label(for="input-example-7") Name
input#input-example-7.form-input(type="text" placeholder="Name")
.form-group
label.form-label Gender
label.form-radio
input(type="radio" name="gender")
i.form-icon
| Male
label.form-radio
input(type="radio" name="gender" checked="")
i.form-icon
| Female
.modal-footer
button.btn.btn-primary Submit
a.btn.btn-link(href="#modals-sizes" aria-label="Close") Close
p
| Use the #[code modal-sm] class for a smaller modal dialog.
| The container max width is #[code 320px].
.docs-demo.columns
.column
a.btn.btn-primary(href="#example-modal-3") Open large size Modal
#example-modal-3.modal.modal-lg
a.modal-overlay(href="#modals-sizes" aria-label="Close")
.modal-container(role="document")
.modal-header
a.btn.btn-clear.float-right(href="#modals-sizes" aria-label="Close")
.modal-title.h5 Modal title
.modal-body
.content
p This is the content inside the modal.
h4 Lorem ipsum
p
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
p
| Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
h4 Cupcake ipsum
p
| Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.
p
| De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
h4 Candy ipsum
p
| Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
p
| Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
.modal-footer
button.btn.btn-primary Share
a.btn.btn-link(href="#modals-sizes") Close
p
| Use the #[code modal-lg] class for a full size modal.
| The container max width is #[code 960px].
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="modal modal-sm">
<a href="#close" class="modal-overlay" aria-label="Close"></a>
<div class="modal-container">
<!-- modal structure here -->
</div>
</div>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
