Bulma es un marco CSS moderno que proporciona componentes frontend listos para usar que podemos usar en nuestros sitios web. Bulma Modal es una superposición modal que puede contener lo que quieras. En este artículo, veremos cómo crear una imagen modal en Bulma.
Para crear un modal de imagen, usaremos una etiqueta img dentro de modal-content y usaremos JavaScript para abrir y cerrar el modal alternando la clase is-active en el componente modal.
Sintaxis:
<div class="modal">
<div class="modal-content">
<img src="...">
</div>
</div>
Ejemplo: El siguiente ejemplo ilustra cómo crear una imagen modal con Bulma.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet'
href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.container {
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks</h1>
<b>Bulma Image Modal</b>
<div class="container">
<div id="modal1" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<p class="image is-1by1">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png"
alt="GeeksforGeeks Logo">
</p>
</div>
<button class="modal-close is-large"
aria-label="close">
</button>
</div>
<button onclick="openModal();"
class="button is-primary">
Open the Modal
</button>
</div>
<script>
// JavaScript code to open and close the modal
// Function to open the modal
function openModal() {
// Add is-active class on the modal
document.getElementById("modal1")
.classList.add("is-active");
}
// Add event listeners to close the modal
// whenever user click outside modal
document.querySelectorAll(
'.modal-background, .modal-close,.modal-card-head .delete, .modal-card-foot .button'
).forEach(($el) => {
const $modal = $el.closest('.modal');
$el.addEventListener('click', () => {
// Remove the is-active class from the modal
$modal.classList.remove("is-active");
});
});
</script>
</body>
</html>
Producción:
Bulma Imagen modal
Referencia: https://bulma.io/documentation/components/modal/#image-modal