Sådan oprettes: Pop-up chatvindue

Sådan oprettes et pop-up chatvindue

Første trin - Tilføj HTML:

Brug <form>-elementet til at håndtere input. Du kan lære mere om dette i vores PHP-tur.

<div class="chat-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Chat</h1>
    <label for="msg"><b>Besked</b></label>
    <textarea placeholder="Skriv besked..." name="msg" required></textarea>
    <button type="submit" class="btn">Send</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Luk</button>
  </form>
</div>

Første trin - Tilføj CSS:

{box-sizing: border-box;}
/* Bruges til at åbne chatformularen - fastgjort nederst på siden */
.open-button {
  background-color: #555;
  Farve: hvid;
  Mål: 16px 20px;
  Kant: ingen;
  Muspeger: pegefinger;
  Opacity: 0.8;
  Position: fast;
  bottom: 23px;
  right: 28px;
  width: 280px;
}
/* Åbne chatvindue - standardmæssigt skjult */
.chat-popup {}}
  Vis: ingen;
  Position: fast;
  Nederst: 0;
  Højre: 15px;
  Kant: 3px solid #f1f1f1;
  Z-index: 9;
}
/* Tilføj stil til formularkontainer */
.form-container {
  Maks-bredde: 300px;
  Mål: 10px;
  Baggrundsfarve: hvid;
}
/* Full bred tekstområde */
.form-container textarea {
  Bredde: 100%;
  Mål: 15px;
  Margin: 5px 0 22px 0;
  Kant: ingen;
  Baggrund: #f1f1f1;
  Juster: ingen;
  Min-højde: 200px;
}
/* Udfør visse handlinger, når tekstområdet får fokus */
.form-container textarea:focus {
  Baggrundsfarve: #ddd;
  Udseende: ingen;
}
/* Indstil stil for indsendelses-/loginknapper */
.form-container .btn {
  Baggrundsfarve: #04AA6D;
  Farve: hvid;
  Mål: 16px 20px;
  Kant: ingen;
  Muspeger: pegefinger;
  Bredde: 100%;
  Margin-bund: 10px;
  Opacity: 0.8;
}
/* Tilføj rød baggrundsfarve til annulleringsknappen */
.form-container .cancel {
  Baggrundsfarve: rød;
}
/* Tilføj nogle hover-effekter til knapper */
.form-container .btn:hover, .open-button:hover {
  Opacity: 1;
}

Tredje trin - Tilføj JavaScript:

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

Prøv det selv

Relaterede sider

Vejledning:HTML formular

Vejledning:CSS formular