También, se continuó hablando sobre las ventanas modales y las popup.
Primero, mostraré un ejemplo de una función en javascript:
<html>
<head>
<script type="text/javascript">
function ver_confirm()
{
var name=confirm("Pulsa un botón")
if (name==true)
{
document.write("Has pulsado el botón Aceptar");
}
else
{
document.write("Has pulsado el botón Cancelar");
}
}
</script>
</head>
<body>
<form>
<input type="button" onclick="ver_confirm()"
value="Mostrar una ventana de confirmación">
</form>
</body>
</html>
Esta función, hace que el usuario tenga dos opciones, aceptar o cancelar, y dependiendo de la que se oprima, un document.write mostrará en pantalla cual de las dos se oprimió.
Ahora, un código de ventana modal. (Este no es el único código que se puede utilizar para crear una ventana modal, el código lo puede crear una persona a su gusto, pero para hacerlo se debe tener conocimiento de HTML, CSS y JAVASCRIPT.
<html>
<head>
<title>hinojosachapel.com | Una simple ventana modal con HTML y Javascript</title>
<script type="text/javascript">
function mostrarVentana()
{
var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
ventana.style.marginTop = "100px"; // Definimos su posición vertical. La ponemos fija para simplificar el código
ventana.style.marginLeft = ((document.body.clientWidth-350) / 2) + "px"; // Definimos su posición horizontal
ventana.style.display = 'block'; // Y lo hacemos visible
}
function ocultarVentana()
{
var ventana = document.getElementById('miVentana'); // Accedemos al contenedor
ventana.style.display = 'none'; // Y lo hacemos invisible
}
</script>
</head>
<body>
Haz click <a href="javascript:mostrarVentana();">aquí</a>
<div id="miVentana" style="position: fixed; width: 350px; height: 190px; top: 0; left: 0; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; border: #333333 3px solid; background-color: #FAFAFA; color: #000000; display:none;">
<div style="font-weight: bold; text-align: left; color: #FFFFFF; padding: 5px; background-color:#006394">Título de la ventana</div>
<p style="padding: 5px; text-align: justify; line-height:normal">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum a est. Suspendisse vehicula, nisl vitae molestie pulvinar, eros nunc volutpat neque, sit amet ultricies nulla sem at ipsum.</p>
<div style="padding: 10px; background-color: #F0F0F0; text-align: center; margin-top: 44px;">
<input id="btnAceptar" onclick="ocultarVentana();" name="btnAceptar" size="20" type="button" value="Cerrar Ventana" />
</div>
</div>
</body>
</html>
El anterior código consiste en un div, al cual se le dan un conjunto de atributos necesarios en CSS para crear un contenedor, el cual es la ventana modal, algo importante es el display:none, ya que este hace invisible a la ventana modal, y después se llama con un botón que al oprimirse ejecuta la función para hacer visible al div gracias a ventana.style.display = "block", y hacer que se posicione en el centro de la pantalla; luego, con otra función se cierra la ventana, en realidad no se cierra, sino que se vuelve invisible de nuevo.
A continuación, dos atributos que ofrece el HTML5.
Pattern:
Al poner un regex como valor del atributo
pattern en un <input> decimos al navegador cuál es el valor aceptable para este campo del formulario. Familiarizarse con las expresiones regulares puede llevar algún tiempo y práctica, puedes empezar con la documentación para regex en javascript ofrecida por mozilla.Por ejemplo, en España un número de teléfono fijo comienza por 9 o por 8 y un número móvil comienza por 6 o por 7 y en ambos casos le sigue un número de 8 dígitos. Un regex para aceptar números de teléfono de España podría ser:
<label for="tel">Teléfono (9 dígitos comenzando por 9, 8, 7 o 6)</label>
<input type="text" pattern="^[9|8|7|6]\d{8}$">
Este regex dice: aceptar sólo un número que comiencen por 9, 8, 6 o 7 seguido de 8 dígitos.
Required:
Tal y como su nombre indica, este atributo se utiliza para decir al navegador los campos del formulario que son requeridos de forma obligatoria, es decir, que no pueden quedar vacíos. Basta con poner
required o required="required". Por ejemplo:<input type="text" name="twitter_username"
pattern="^@?(\w){1,15}$"
title="Este no parece un usuario de twitter válido"
required>
Los anteriores atributos fueron tomados de: https://cybmeta.com/validacion-de-formularios-con-html5
Publicar un comentario