Skip to content

Commit 09d0e2b

Browse files
thetthet
committed
maint(pat modal): Update demo, re-activate autoload modal.
1 parent 218c261 commit 09d0e2b

File tree

1 file changed

+102
-99
lines changed

1 file changed

+102
-99
lines changed

‎src/pat/modal/index.html‎

Lines changed: 102 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
></script>
1212
</head>
1313
<body>
14+
1415
<form action="#modal-source"
1516
method="get"
1617
class="pat-modal">
@@ -21,11 +22,13 @@
2122
</button>
2223
</fieldset>
2324
</form>
25+
2426
<p>
2527
Open a
2628
<a href="#modal-source"
2729
class="pat-modal"> Modal panel via AJAX</a>.
2830
</p>
31+
2932
<p>
3033
Open a
3134
<a href="#modal-source-panel"
@@ -34,6 +37,7 @@
3437
Modal panel with an extra class 'panel' on it</a
3538
>.
3639
</p>
40+
3741
<p>
3842
Open a
3943
<a href="#modal-source-headerless"
@@ -50,123 +54,122 @@
5054
Modal with a custom header</a>.
5155
</p>
5256

53-
<div id="examples"
54-
hidden>
55-
<div id="modal-source">
56-
<h1>Example modal</h1>
57+
<div id="modal-on-load" class="pat-modal">
58+
<h1>Modal example with auto load</h1>
59+
<article class="pat-rich">
60+
<p>Frequent uses of modal windows include:</p>
61+
<ul>
62+
<li>
63+
Drawing attention to vital pieces of information. This
64+
use has been criticised as ineffective because users are
65+
bombarded with too many dialog boxes, and habituate to
66+
simply clicking "Close", "Cancel", or "OK" without
67+
reading or understanding the message.
68+
</li>
69+
<li>
70+
Blocking the application flow until information required
71+
to continue is entered, as for example a password in a
72+
login process. Another example are file dialogs to open
73+
and save files in an application.
74+
</li>
75+
</ul>
76+
<p>*Source: Wikipedia</p>
77+
</article>
78+
</div>
79+
80+
81+
<!-- TEMPLATES -->
82+
83+
<template id="modal-source">
84+
<h1>Example modal</h1>
85+
<div class="container">
86+
<p>
87+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
88+
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
89+
quae ab illo inventore veritatis et quasi architecto beatae
90+
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
91+
voluptas sit aspernatur aut odit aut fugit, sed quia
92+
consequuntur magni dolores eos qui ratione voluptatem sequi
93+
nesciunt.
94+
</p>
95+
</div>
96+
</template>
97+
98+
<template id="modal-source-panel">
99+
<h1>Example modal</h1>
100+
<div class="panel-body">
57101
<div class="container">
58102
<p>
59103
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
60104
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
61-
quae ab illo inventore veritatis et quasi architecto beatae
62-
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
63-
voluptas sit aspernatur aut odit aut fugit, sed quia
64-
consequuntur magni dolores eos qui ratione voluptatem sequi
65-
nesciunt.
105+
quae ab illo inventore veritatis.
66106
</p>
67107
</div>
68108
</div>
69-
70-
<div id="modal-source-panel" hidden>
71-
<h1>Example modal</h1>
72-
<div class="panel-body">
73-
<div class="container">
74-
<p>
75-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
76-
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
77-
quae ab illo inventore veritatis.
78-
</p>
79-
</div>
80-
</div>
81-
<div class="panel-footer">
82-
<div class="container">
83-
<button type="button"
84-
class="close-panel pat-button">Close</button>
85-
</div>
109+
<div class="panel-footer">
110+
<div class="container">
111+
<button type="button"
112+
class="close-panel pat-button">Close</button>
86113
</div>
87114
</div>
115+
</template>
88116

89-
<div id="modal-source-headerless" hidden>
90-
<h1>Header goes into panel</h1>
91-
<div class="panel-body">
92-
<div class="container">
93-
<p>
94-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
95-
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
96-
quae ab illo inventore veritatis.
97-
</p>
98-
</div>
117+
<template id="modal-source-headerless">
118+
<h1>Header goes into panel</h1>
119+
<div class="panel-body">
120+
<div class="container">
121+
<p>
122+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
123+
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
124+
quae ab illo inventore veritatis.
125+
</p>
99126
</div>
100-
<div class="panel-footer">
101-
<div class="container">
102-
<button type="button"
103-
class="close-panel pat-button">Close</button>
104-
</div>
127+
</div>
128+
<div class="panel-footer">
129+
<div class="container">
130+
<button type="button"
131+
class="close-panel pat-button">Close</button>
105132
</div>
106-
107-
<style type="text/css">
108-
.pat-modal .panel-content h1 {
109-
margin: 0 0 40px;
110-
padding: 0;
111-
text-align: center;
112-
font-size: 30px;
113-
}
114-
</style>
115133
</div>
116134

117-
<div id="modal-source-custom-header" hidden>
118-
<h1>Use the custom one instead of me</h1>
119-
<h1 class="custom-header">Custom header</h1>
120-
<div class="panel-body">
121-
<div class="container">
122-
<p>
123-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
124-
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
125-
quae ab illo inventore veritatis.
126-
</p>
127-
</div>
135+
<style type="text/css">
136+
.pat-modal .panel-content h1 {
137+
margin: 0 0 40px;
138+
padding: 0;
139+
text-align: center;
140+
font-size: 30px;
141+
}
142+
</style>
143+
</template>
144+
145+
<template id="modal-source-custom-header">
146+
<h1>Use the custom one instead of me</h1>
147+
<h1 class="custom-header">Custom header</h1>
148+
<div class="panel-body">
149+
<div class="container">
150+
<p>
151+
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
152+
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
153+
quae ab illo inventore veritatis.
154+
</p>
128155
</div>
129-
<div class="panel-footer">
130-
<div class="container">
131-
<button type="button"
132-
class="close-panel pat-button">Close</button>
133-
</div>
156+
</div>
157+
<div class="panel-footer">
158+
<div class="container">
159+
<button type="button"
160+
class="close-panel pat-button">Close</button>
134161
</div>
135-
136-
<style type="text/css">
137-
.pat-modal .panel-content h1 {
138-
margin: 0 0 40px;
139-
padding: 0;
140-
text-align: center;
141-
font-size: 30px;
142-
}
143-
</style>
144162
</div>
145163

146-
<div id="modal-on-load"
147-
class="pat-modal">
148-
<h1>Modal example with auto load</h1>
149-
<article class="pat-rich">
150-
<p>Frequent uses of modal windows include:</p>
151-
<ul>
152-
<li>
153-
Drawing attention to vital pieces of information. This
154-
use has been criticised as ineffective because users are
155-
bombarded with too many dialog boxes, and habituate to
156-
simply clicking "Close", "Cancel", or "OK" without
157-
reading or understanding the message.
158-
</li>
159-
<li>
160-
Blocking the application flow until information required
161-
to continue is entered, as for example a password in a
162-
login process. Another example are file dialogs to open
163-
and save files in an application.
164-
</li>
165-
</ul>
166-
<p>*Source: Wikipedia</p>
167-
</article>
168-
</div>
169-
</div>
164+
<style type="text/css">
165+
.pat-modal .panel-content h1 {
166+
margin: 0 0 40px;
167+
padding: 0;
168+
text-align: center;
169+
font-size: 30px;
170+
}
171+
</style>
172+
</template>
170173

171174
</body>
172175
</html>

0 commit comments

Comments
 (0)