Alertas W3.CSS
La clase w3-panel es la clase perfecta para mostrar todo tipo de alertas:
¡Peligro!
El rojo a menudo indica una situación peligrosa o negativa.
Las alertas a menudo se muestran usando un color fuerte:
¡Peligro!
El rojo a menudo indica una situación peligrosa o negativa.
Ejemplo
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Mostrar advertencias
¡Advertencia!
El amarillo a menudo indica una advertencia que podría necesitar atención.
¡Advertencia!
El amarillo a menudo indica una advertencia que podría necesitar atención.
Ejemplo
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
Mostrar éxitos
¡Éxito!
El verde a menudo indica algo exitoso o positivo.
¡Éxito!
El verde a menudo indica algo exitoso o positivo.
Ejemplo
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
Mostrar información
¡Información!
El azul a menudo indica un cambio o acción informativo neutral.
¡Información!
El azul a menudo indica un cambio o acción informativo neutral.
Ejemplo
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
usando un contenedor
La clase de contenedor w3 también se puede usar para mostrar alertas:
Ejemplo
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Alertas en Todos los Colores
Las alertas a menudo se muestran en colores especiales, pero se puede usar cualquier color:
¡Peligro!
El rojo a menudo indica una situación peligrosa o negativa.
¡Peligro!
El rojo a menudo indica una situación peligrosa o negativa.
¡Peligro!
El rojo a menudo indica una situación peligrosa o negativa.
¡Peligro!
El rojo a menudo indica una situación peligrosa o negativa.
¡Peligro!
El rojo a menudo indica una situación peligrosa o negativa.
Ejemplo
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
Alertas de cierre
Para cerrar el cuadro de alerta, haga clic en la X en la esquina superior derecha:
¡Peligro!
El rojo a menudo indica una situación peligrosa o negativa.
Para crear la X que cierra la alerta, agregue un elemento <span> con la clase w3-button y un evento onclick :
Ejemplo
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
Sugerencia: el código HTML × entidad es el icono preferido para los botones de cierre (en lugar de la letra "X").
Alertas redondeadas
Use las clases w3-round si desea esquinas redondeadas:
¡Éxito!
Aquí se usa w3-round.
¡Éxito!
Aquí se usa w3-round-large.
¡Éxito!
Aquí se usa w3-round-xxlarge.
Ejemplo
<div class="w3-panel w3-green w3-round">
Alerta como tarjeta
Utilice una clase de tarjeta w3 si desea que la alerta se muestre como una tarjeta:
¡Advertencia!
El amarillo a menudo indica algo que necesita atención.
Ejemplo
<div class="w3-panel w3-yellow w3-card-4">