Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox . Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo.
En este artículo, aprenderemos sobre las tarjetas Bulma Modal. Bulma framework proporciona al usuario una superposición modal en la que podemos agregar cualquier contenido. La tarjeta modal puede incluir cualquier cosa como texto, botones, enlaces, imágenes, etc. La implementación completa de la tarjeta Bulma Modal se muestra a continuación y también se analizan las clases utilizadas para crear una tarjeta modal.
Clases Modales Bulma:
- modal-card: esta clase se utiliza para crear un contenedor de tarjeta modal.
- modal-card-head: esta clase se usa para agregar un encabezado a una tarjeta modal.
- modal-card-title: esta clase se utiliza para agregar el título a su tarjeta modal.
- modal-card-body: esta clase se usa para agregar contenido a su tarjeta modal.
- modal-card-foot: esta clase se usa para agregar contenido de pie de página a su tarjeta modal.
Sintaxis:
<div class="modal">
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">...</p>
...
</header>
<div class="modal-card-body">
...
</div>
<footer class="modal-card-foot">
...
</footer>
</div>
</div>
Ejemplo 1: El siguiente ejemplo ilustra la tarjeta Bulma Modal usando las clases anteriores .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Modal Card</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
/>
</head>
<body class="has-text-centered content">
<h1 class="title has-text-success">GeeksforGeeks</h1>
<h2 class="subtitle">Bulma Modal Card</h2>
<div class="container">
<div class="modal" id="modal1">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Welcome to GeeksforGeeks</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<h1>Hola!</h1>
<p>Welcome Geek! Learn all CS fundamentals, do programming,
participate in contests, an many more.</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220211204421/logo-200x200.jpg"
alt="">
</section>
<footer class="modal-card-foot">
<button class="button is-danger">Cancel</button>
</footer>
</div>
</div>
<button onclick="openModal();" class="button is-success">
Open Modal
</button>
</div>
<script>
// Function for opening the modal
function openModal()
{
// is-active class of the modal
document.getElementById("modal1").classList.add("is-active");
}
// Adding event listeners for closing the 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", () => {
// removing is-active class from modal
$modal.classList.remove("is-active");
});
});
</script>
</body>
</html>
Producción:
Tarjeta Modal Bulma
Ejemplo 2: Otro ejemplo que ilustra la tarjeta Bulma Modal.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Modal Card</title>
<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 content">
<h1 class="title has-text-success">GeeksforGeeks</h1>
<h2 class="subtitle">Bulma Modal Card</h2>
<div class="container">
<div class="modal" id="modal1">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">GeeksforGeeks</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body left">
<h1>Learn at GeeksforGeeks</h1>
<p>Find below all list of courses.</p>
<ol class="is-lower-alpha has-text-left">
<a href=
"https://practice.geeksforgeeks.org/courses/dsa-self-paced">
<li>Fork Java</li>
</a>
<a href=
"https://practice.geeksforgeeks.org/courses/fork-java">
<li>DSA- Self Paced</li>
</a>
<a href=
"https://practice.geeksforgeeks.org/courses/system-design-live">
<li>System Design</li>
</a>
<a href=
"https://practice.geeksforgeeks.org/courses/full-stack-node">
<li>Full Stack Development with React & Node JS - Live</li>
</a>
</ol>
<a href=
"https://practice.geeksforgeeks.org/courses" class="subtitle">
Find more
</a>
</section>
<footer class="modal-card-foot">
<button class="button is-danger">Cancel</button>
</footer>
</div>
</div>
<button onclick="openModal();" class="button is-success">
Explore
</button>
</div>
<script>
// 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:
Tarjeta Modal Bulma
Referencia: https://bulma.io/documentation/components/modal/#modal-card
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA