Esercizio: creiamo una pagina con un form in una finestra modale che chiama direttamente con ajax uno script php per inviare i dati


scriviamo l'html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery esercizio 9 finestra modale con form ajax</title>
 
<style>
 
</style>
 
</head>
 
<body>
<section>
    <h1> Finestra modale con con ajax in jquery</h1>
    <p> In questo esercizio con Jquery apriamo un <strong>form</strong> in una pagina
    con <strong>una finestra modale</strong>: i dati immessi dall'utente verranno
    passati direttamente ad uno script in php ed inviati</p>
  <button id="apri-form"> contattaci</button>
</section>
<section id ="modulo">
    <form id="contatti">
      <p>
        <label>nome
          <input type="text" name="nome" id="nome">
        </label>
      </p>
      <p>
        <label>email
          <input type="text" name="email" id="email">
        </label>
      </p>
      <p>
        <label>messaggio
          <textarea name="messaggio" id="messaggio" cols="45" rows="5"></textarea>
        </label>
      </p>
      <p>
        <input type="submit" name="invia" id="invia" value="Invia">
        <input type="reset" name="reset" id="reset" value="Ripristina">
        <input type="button" name="chiudi" id="chiudi" value="x">
      </p>
    </form>
<script>
$(document).ready(function() {
   // qui andrà lo script jQuery
 
 
 
 });
  </script>
</body>
</html>
 


segnaposto

Per quanto riguarda il CSS ovviamente è tutto ampiamente personalizzabile: segnalo la tecnica usata per centrare la finestra modale: invece i colori in RGBA sono da testare (eventualmente in produzione usare una immagine png di sfondo o cambiare il colore del body/contrent con jQuery)
non metto il valore dello z-index perché implicito nell'html: comunque tenetelo sotto controllo

ecco il CSS

body {
    background-color:#DEDEDE;
}
#contenuto {
    width:500px;
    border-left:solid 1px #8D8D8D;
    border-right:solid 1px #8D8D8D;
    margin:0px auto;
    background-color:#fff;
    padding:60px;
 
    }
#modulo {
    width:100%;
    height:100%;
    background-color:rgba(30,30,50,0.8);
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
 
#contatti {
    font:18px/26px Verdana, Geneva, sans-serif;
    color:#333;
    width:400px;
    height:340px;
    background-color:rgba(255,255,255,0.8);
    position:absolute;
    padding:10px;
 
        top:50%;            /* posiziono al 50% verticale */
    left:50%;           /* e orizzontale */
    margin-top:-170px;  /* sposto di metà dell'altezza in alto */
    margin-left:-210px; /* sposto di metà della larghezza a sin */
 
    border:4px solid #666;
    border-radius:30px;
    box-shadow:0px 0px 8px #fff;
}



segnaoposto






segnaposto