GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing es.javascript.info — Agregar un botón de cierre

regresar a la lección

Agregar un botón de cierre

importancia: 5

Hay una lista de mensajes.

Usa JavaScript para agregar un botón de cierre en la esquina superior derecha de cada mensaje.

El resultado debería verse algo así:

Abrir un entorno controlado para la tarea.

Para agregar el botón podemos usar cualquiera de las opciones position:absolute (y hacer el panel position:relative) o float:right. El float:right tiene la ventaja de que el botón no se encima con el texto, pero position:absolute da más libertad. Entonces la elección es tuya.

Luego, para cada panel, el código puede ser así:

pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');

Luego el <button> se convierte en pane.firstChild, por lo que podemos agregarle un controlador como este:

pane.firstChild.onclick = () => pane.remove();

Abrir la solución en un entorno controlado.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.