http://wiki.enunpimpam.com/pimpamwiki/index.php?action=history&feed=atom&title=Asignar_Modal_a_un_elemento
Asignar Modal a un elemento - Historial de revisiones
2026-04-06T00:13:49Z
Historial de revisiones de esta página en el wiki
MediaWiki 1.34.1
http://wiki.enunpimpam.com/pimpamwiki/index.php?title=Asignar_Modal_a_un_elemento&diff=1026&oldid=prev
Nacho en 12:34 11 ago 2020
2020-08-11T12:34:31Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="es">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Revisión anterior</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revisión del 12:34 11 ago 2020</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Línea 1:</td>
<td colspan="2" class="diff-lineno">Línea 1:</td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Categoría:JavaScript]]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Asignar un la entrada de un modal al hacer click en un image, aparecera el modal con un overlay en el fondo.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Asignar un la entrada de un modal al hacer click en un image, aparecera el modal con un overlay en el fondo.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="html"><!-- modal--></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><syntaxhighlight lang="html"><!-- modal--></div></td></tr>
</table>
Nacho
http://wiki.enunpimpam.com/pimpamwiki/index.php?title=Asignar_Modal_a_un_elemento&diff=1025&oldid=prev
Nacho en 09:58 11 ago 2020
2020-08-11T09:58:41Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="es">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Revisión anterior</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revisión del 09:58 11 ago 2020</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l46" >Línea 46:</td>
<td colspan="2" class="diff-lineno">Línea 46:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> });</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> });</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> } </syntaxhighlight></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> } </syntaxhighlight></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Aqui la llamamos dentro de la función<code class="alert-warning><del class="diffchange diffchange-inline">enderAlbumList</del></code></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Aqui la llamamos dentro de la función <code class="alert-warning><ins class="diffchange diffchange-inline">RenderAlbumList</ins></code></div></td></tr>
</table>
Nacho
http://wiki.enunpimpam.com/pimpamwiki/index.php?title=Asignar_Modal_a_un_elemento&diff=1024&oldid=prev
Nacho: Página creada con «Asignar un la entrada de un modal al hacer click en un image, aparecera el modal con un overlay en el fondo. <syntaxhighlight lang="html"><!-- modal--> <div class="overla…»
2020-08-11T09:58:21Z
<p>Página creada con «Asignar un la entrada de un modal al hacer click en un image, aparecera el modal con un overlay en el fondo. <syntaxhighlight lang="html"><!-- modal--> <div class="overla…»</p>
<p><b>Página nueva</b></p><div>Asignar un la entrada de un modal al hacer click en un image, aparecera el modal con un overlay en el fondo.<br />
<syntaxhighlight lang="html"><!-- modal--><br />
<div class="overlay" id="overlay"><br />
</div><br />
<div class="modal" id="modal"><br />
<h1>Título de la foto</h1><br />
<div class="modal-content"><br />
<img src="" alt="" width="170" height="256"><br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione impedit maiores enim alias ex accusantium quasi cum autem, nam, voluptas tenetur laudantium quod! Odit voluptate illo, voluptas vel quia, quae.</p><br />
</div><br />
<!-- <div class="modal-buttons"><br />
<button class="modal-btn primary" id="cerrar-modal">Cerrar Modal</button><br />
</div> --><br />
</div></syntaxhighlight><br />
Asignamos las constantes que localizan los objetos <code class="alert-info>modal</code> y <code class="alert-info>orvelay</code><br />
<syntaxhighlight lang="js"><br />
const $modal = document.getElementById("modal");<br />
const $overlay = document.getElementById("overlay");<br />
const $cerrarModal = document.getElementById("modal");</syntaxhighlight><br />
Creamos la funciones que muestran y cierran el modal.<br />
<syntaxhighlight lang="js"><br />
function showModal() {<br />
$overlay.classList.add("active");<br />
$modal.style.animation = "modalIn .8s forwards";<br />
}<br />
<br />
$cerrarModal.addEventListener("click", cerrarModal);<br />
function cerrarModal() {<br />
$overlay.classList.remove("active");<br />
$modal.style.animation = "modalOut .8s forwards";<br />
}</syntaxhighlight><br />
La función de cerrar modal esta dentro del evento <code class="alert-warning >addEventListener</code> cuando detecta el click en elemento <code class="alert-success>$cerrarModal</code> (modal) se ejecuta.<br />
<br />
Para que se muestre el modal creamos una función <code class="alert-success>addEventClick</code>que le pasamos como parámetro un elemento, esta función se ejecutara cuando se haga click en el elemento, y ejecutara la función<code class="alert-success>showModal</code><br />
Ahora solo falta llamar a <code class="alert-success>addEventClick</code> y pasarle el objeto <code class="alert-success>addEventClick(AlbumItems)</code><br />
<syntaxhighlight lang="js"><br />
function renderAlbumList(lista, $contenedor) {<br />
lista.forEach(lista => {<br />
// console.log(lista)<br />
const HTMLString = FotoItemTemplate(lista);<br />
const AlbumItems = CrearPlantilla(HTMLString);<br />
$contenedor.append(AlbumItems);<br />
addEventClick(AlbumItems);<br />
// console.log(HTMLString)<br />
// console.log(HTMLString)<br />
});<br />
} </syntaxhighlight><br />
Aqui la llamamos dentro de la función<code class="alert-warning>enderAlbumList</code></div>
Nacho