Hace nada he descubierto la existencia de los modales, y me pareció muy interesante para añadirlo a la web. Me fijé en el código de w3schools, lo copié a mi código y, sí, aparece, pero durante 1 segundo y luego desaparece, mostrando una página en blanco. Me gustaría añadir el modal cuando se presione el botón "Enviar", que aparezca la ventanita, y cuando se cierre se envíen los datos y se resetée el formulario. He estado buscando varias horas, pero no encuentro nada, o me lío, o no sé cómo hacerlo.
Mando el código que tengo en varios archivos.
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Formulario</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div class="form">
<form action="guardar.php" method="POST">
<p>Nombre</p>
<label for="nombre">Su nombre</label>
<br><br>
<input type="text" name="nombre" placeholder="Nombre" required>
<p>Correo</p>
<label for="correo">Direccion De Correo</label>
<br><br>
<input type="email" name="correo" placeholder="[email protected]" required>
<p>Mensaje</p>
<label for="mensaje">Su Mensaje</label>
<br><br>
<textarea name="mensaje" placeholder="Mensaje" required></textarea>
<br>
<br>
<button id="myBtn" class="button" input type="submit" value="Enviar">Enviar</button>
</form>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>guardar.php:
<?php
//conectamos Con el servidor
$host="localhost";
$user="root";
$pass="";
$db="prueba";
$con = mysqli_connect($host,$user,$pass,$db) or die ("Problemas al conectar");
mysqli_select_db($con,$db) or die ("Problemas al conectar con la base de datos");
//recuperar las variables
$nombre=$_POST['nombre'];
$correo=$_POST['correo'];
$mensaje=$_POST['mensaje'];
//Hacer secuencia sql
$sql="INSERT INTO datos (nombre, correo, mensaje) VALUES ('{$nombre}','{$correo}','{$mensaje}')";
//ejecutamos la sentencia de sql
$ejecutar=mysqli_query($con,$sql);
//verificamos la ejecucion
if($ejecutar){
echo"Datos Guardados Correctamente<br><a href='index.html'>Volver</a>";
}else{
echo "Hubo Algun Error";
}
?>Supongo que el problema principalmente estará en "guardar.php" en el
if($ejecutar){
echo"Datos Guardados Correctamente<br><a href='index.html'>Volver</a>";
}else{
echo"Hubo Algun Error";
}El problema es que no sé qué poner en el "if" si sale bien.
