Come creare: finestra di chat emergente

Come creare una finestra di chat emergente

Primo passo - Aggiungi HTML:

Usa l'elemento <form> per gestire l'input. Puoi trovare ulteriori informazioni nei nostri tutorial PHP.

<div class="popup_chat" id="mioModulo">
  <form action="/azione_pagina.php" class="contenitore_modulo">
    <h1>Chat</h1>
    <label for="msg"><b>Messaggio</b></label>
    <textarea placeholder="Scrivi messaggio.." name="msg" richiesto></textarea>
    <button type="submit" class="btn">Inviare</button>
    <button type="button" class="btn annulla" onclick="chiudiModulo()">Chiudi</button>
  </form>
</div>

Secondo passo - Aggiungi CSS:

{box-sizing: border-box;}
/* Pulsante per aprire il modulo di chat - fisso nel fondo della pagina */
.apri-pulsante {
  colore di sfondo: #555;
  colore: bianco;
  riempimento: 16px 20px;
  bordo: none;
  cursore: puntatore;
  opacità: 0.8;
  posizione: fisso;
  basso: 23px;
  destra: 28px;
  larghezza: 280px;
}
/* Apri finestra di chat - nascosta per default */
.chat-popup {}}
  visualizzazione: none;
  posizione: fisso;
  inferiore: 0;
  destra: 15px;
  bordo: 3px solid #f1f1f1;
  indice-z: 9;
}
/* Aggiungi stili alla contenitore del modulo */
.form-container {
  larghezza massima: 300px;
  riempimento: 10px;
  colore di sfondo: bianco;
}
/* Area di testo a piena larghezza */
.form-container textarea {
  larghezza: 100%;
  riempimento: 15px;
  margine: 5px 0 22px 0;
  bordo: none;
  sfondo: #f1f1f1;
  ridimensionabile: none;
  altezza minima: 200px;
}
/* Esegui alcune operazioni quando l'area di testo viene selezionata */
.form-container textarea:focus {
  colore di sfondo: #ddd;
  contorno: none;
}
/* Imposta lo stile dei pulsanti di invio/autenticazione */
.form-container .btn {
  colore di sfondo: #04AA6D;
  colore: bianco;
  riempimento: 16px 20px;
  bordo: none;
  cursore: puntatore;
  larghezza: 100%;
  margine inferiore: 10px;
  opacità: 0.8;
}
/* Aggiungi un colore di sfondo rosso al pulsante annulla */
.form-container .cancel {
  colore di sfondo: rosso;
}
/* Aggiungi alcuni effetti di hover ai pulsanti */
.form-container .btn:hover, .open-button:hover {
  opacità: 1;
}

Passo 3 - Aggiungi JavaScript:

function openForm() {
  document.getElementById("myForm").style.display = "block";
}
function closeForm() {
  document.getElementById("myForm").style.display = "none";
}

Prova personalmente

Pagine correlate

Tutorial:Formulario HTML

Tutorial:Formulario CSS