En palabras simples, el componente Modal es un cuadro de diálogo/ventana emergente que se muestra en la parte superior de la página actual, una vez que se hace clic en el botón de activación. Debe tenerse en cuenta que W3.CSS no admite modales anidados, ya que crean una mala experiencia de interfaz de usuario para el usuario. Por lo tanto, solo se admite una ventana modal a la vez. W3.CSS tiene dos clases de modelo para crear y agregar contenido en la ventana del modelo. Y debe tenerse en cuenta que tenemos que agregar un botón de cierre ya que el modelo en W3.CSS no viene con uno.
|
No Señor. |
Clase de modelo |
Descripción |
|---|---|---|
|
1. |
w3-modal |
Define el contenedor del modelo. |
|
2. |
w3-modal-contenido |
Define el contenido del modelo. |
Siga el ejemplo a continuación para aprender cómo crear un modelo usando W3.CSS:
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Title of the page -->
<title>GeeksForGeeks</title>
<!-- Adding W3.CSS file through external link -->
<link rel="stylesheet" href=
"https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
<div class="w3-container w3-center">
<!-- w3-text-green sets the text
colour to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
<h2 class="w3-text-green w3-xxlarge">
GeeksForGeeks
</h2>
</div>
<!-- Model in W3.CSS -->
<div class="w3-container w3-center w3-text-red">
<!-- Model Open Button -->
<button onclick="document.getElementById('geek')
.style.display='block'" class="w3-text-white
w3-button w3-orange w3-hover-red w3-round">
Open Modal
</button>
<!-- Model Content -->
<div id="geek" class="w3-modal">
<div class="w3-modal-content">
<!-- Model Header -->
<!-- Model Close Button in the heading-->
<header class="w3-container
w3-white w3-text-green">
<span onclick="document.getElementById(
'geek').style.display='none'"
class="w3-button w3-display-topright
w3-white w3-text-gray w3-hover-red">
×
</span>
<h3>GeeksForGeeks</h3>
</header>
<!-- Model Content -->
<div class="w3-container">
<p>
Articles that need little modification/
improvement from reviewers are published
first. To quickly get your articles
reviewed, please refer existing articles,
their formating style, coding style,
and try to make your close to them.
</p>
</div>
<!-- Model Footer -->
<footer class="w3-container w3-white">
<button class="w3-margin w3-round w3-right
w3-blue w3-button w3-hover-blue"
onclick="document.getElementById('geek')
.style.display='none'">
Okay
</button>
<button class="w3-margin w3-round w3-right
w3-red w3-button w3-hover-red"
onclick="document.getElementById('geek')
.style.display='none'">
Close
</button>
</footer>
</div>
</div>
</div>
</body>
</html>
Producción:
Antes de lanzar el Modal:
Después de lanzar el Modal:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA