Skip to content

Commit 0ea1781

Browse files
programadornovatoprogramadornovato
committed
16.- Bootstrap🌈 de 0 a 100 [ventana modal]
Video: https://youtu.be/wnIOPq1yWJ8
1 parent 43fee1c commit 0ea1781

File tree

1 file changed

+87
-5
lines changed

1 file changed

+87
-5
lines changed

‎index.html

Lines changed: 87 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -95,30 +95,112 @@ <h5>Lorem, ipsum dolor sit amet</h5>
9595
</form>
9696
</div>
9797
</nav>
98+
<!-- tarjetas -->
9899
<div class="container mt-5">
99100
<div class="card-deck">
100101
<div class="card">
101-
<img class="card-img-top" src="images/card-1.jpg" alt="Card image cap">
102+
<a href="#" data-toggle="modal" data-target="#modal1"><img class="card-img-top" src="images/card-1.jpg" alt="Card image cap"></a>
102103
<div class="card-body">
103104
<h5 class="card-title">Card title</h5>
104105
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
105106
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
107+
108+
<!-- Button trigger modal -->
109+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
110+
Ver
111+
</button>
112+
113+
<!-- Modal -->
114+
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label" aria-hidden="true">
115+
<div class="modal-dialog" role="document">
116+
<div class="modal-content">
117+
<div class="modal-header">
118+
<h5 class="modal-title" id="modal1Label">Tarjeta 1</h5>
119+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
120+
<span aria-hidden="true">&times;</span>
121+
</button>
122+
</div>
123+
<div class="modal-body">
124+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
125+
</div>
126+
<div class="modal-footer">
127+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
128+
</div>
129+
</div>
130+
</div>
131+
</div>
132+
133+
106134
</div>
107135
</div>
108136
<div class="card">
109-
<img class="card-img-top" src="images/card-2.jpg" alt="Card image cap">
137+
<a href="#" data-toggle="modal" data-target="#modal2"><img class="card-img-top" src="images/card-2.jpg" alt="Card image cap"></a>
110138
<div class="card-body">
111139
<h5 class="card-title">Card title</h5>
112-
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
140+
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
113141
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
142+
143+
<!-- Button trigger modal -->
144+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2">
145+
Ver
146+
</button>
147+
148+
<!-- Modal -->
149+
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2Label" aria-hidden="true">
150+
<div class="modal-dialog" role="document">
151+
<div class="modal-content">
152+
<div class="modal-header">
153+
<h5 class="modal-title" id="modal2Label">Tarjeta 2</h5>
154+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
155+
<span aria-hidden="true">&times;</span>
156+
</button>
157+
</div>
158+
<div class="modal-body">
159+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
160+
</div>
161+
<div class="modal-footer">
162+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
168+
114169
</div>
115170
</div>
116171
<div class="card">
117-
<img class="card-img-top" src="images/card-3.jpg" alt="Card image cap">
172+
<a href="#" data-toggle="modal" data-target="#modal3"><img class="card-img-top" src="images/card-3.jpg" alt="Card image cap"></a>
118173
<div class="card-body">
119174
<h5 class="card-title">Card title</h5>
120-
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
175+
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
121176
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
177+
178+
<!-- Button trigger modal -->
179+
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal3">
180+
Ver
181+
</button>
182+
183+
<!-- Modal -->
184+
<div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="modal3Label" aria-hidden="true">
185+
<div class="modal-dialog" role="document">
186+
<div class="modal-content">
187+
<div class="modal-header">
188+
<h5 class="modal-title" id="modal3Label">Tarjeta 3</h5>
189+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
190+
<span aria-hidden="true">&times;</span>
191+
</button>
192+
</div>
193+
<div class="modal-body">
194+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
195+
</div>
196+
<div class="modal-footer">
197+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
203+
122204
</div>
123205
</div>
124206
</div>

0 commit comments

Comments
 (0)