Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y fácil de mantener. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
En este artículo, aprenderemos sobre Blaze UI Scrollable Modal . Blaze UI scrollable modal es un cuadro de diálogo que contiene el contenido que se puede desplazar y se muestra en la pantalla cuando el usuario hace clic en el botón.
Blaze UI Clase modal de contenido desplazable:
- o-panel: esta clase se usa para agregar un modal de contenido desplazable y se agrega a la clase de cuerpo modal y aplica una altura fija para que el contenido largo comience a desplazarse.
Sintaxis:
<div role="dialog" class="o-modal o-modal--visible">
<div class="c-card">
<div class="c-card__body o-panel">
...
</div>
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra el modal de contenido desplazable básico.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
</head>
<body>
<div class="o-container o-container--medium">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Blaze UI Scrollable Content Modal</h3>
<button type="button" class="c-button
c-button--brand" onClick="showModal()">
Show Modal
</button>
</div>
<div role="dialog" class="o-modal o-modal--visible"
id="modal">
<div class="c-card">
<header class="c-card__header">
<button type="button"
class="c-button c-button--close"
onclick="closeModal()">×
</button>
<h2 class="c-heading">GeeksforGeeks</h2>
</header>
<div class="c-card__body o-panel"
style="height:100px">
GeeksforGeeks is a portal for geeks.
It has a collection of articles, tutorials,
quizzes, and videos. It also has a forum for discussion.
Participants can post their queries and answers.
Find more about GeeksforGeeks below:
<ul class="c-list">
<a href="#">
<li class="c-list__item">Tutorials</li>
</a>
<a href="#">
<li class="c-list__item">Articles</li>
</a>
<a href="#">
<li class="c-list__item">Courses></li>
</a>
<ul class="c-list">
<a href="#">
<li class="c-list__item">Java</li>
</a>
<a href="#">
<li class="c-list__item">Python</li>
</a>
</ul>
</ul>
</div>
<footer class="c-card__footer">
<button type="button"
class="c-button c-button--brand"
onclick="closeModal()">Close
</button>
</footer>
</div>
</div>
<script>
function closeModal() {
document.getElementById("modal")
.classList.remove("o-modal--visible");
}
function showModal() {
document.getElementById("modal")
.classList.add("o-modal--visible");
}
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el modal de contenido desplazable con una imagen.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
</head>
<body>
<div class="o-container o-container--medium">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Blaze UI Scrollable Content Modal</h3>
<button type="button"
class="c-button c-button--brand"
onClick="showModal()">
Show Modal
</button>
</div>
<div role="dialog" class="o-modal o-modal--visible"
id="modal">
<div class="c-card">
<header class="c-card__header">
<button type="button"
class="c-button c-button--close"
onclick="closeModal()">
×
</button>
<h2 class="c-heading">GeeksforGeeks</h2>
</header>
<div class="c-card__body o-panel " style="height:200px">
<Image src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
style="margin-left: 20px;
border-radius: 150px;
width: 150px;" />
GeeksforGeeks is a portal for geeks. It has a
collection of articles, tutorials, quizzes,
and videos. It also has a forum for discussion.
Participants can post their queries and answers.
GFG has its own job portal where you can apply
for jobs
</div>
<footer class="c-card__footer">
<button type="button"
class="c-button c-button--brand"
onclick="closeModal()">
Close
</button>
</footer>
</div>
</div>
<script>
function closeModal() {
document.getElementById("modal")
.classList.remove("o-modal--visible");
}
function showModal() {
document.getElementById("modal")
.classList.add("o-modal--visible");
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/objects/modals/
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA