Πώς να δημιουργήσετε: Δημιουργία μήνυσης ανακάλυψης

Μάθετε πώς να δημιουργήσετε μήνυση ανακάλυψης χρησιμοποιώντας CSS (Callout Message).

Μήνυση ανακάλυψης

Η μήνυση ανακάλυψης συνήθως βρίσκεται στο κάτω μέρος της σελίδας και χρησιμοποιείται για να ενημερώσει τον χρήστη για κάποια εξειδικευμένα θέματα: συμβουλές/τεχνικές, εκπτώσεις, ενέργειες που πρέπει να ληφθούν κ.λπ.

Δοκιμάστε το προσωπικά

Δημιουργία μήνυσης ανακάλυψης

Βήμα 1 - Προσθήκη HTML:

<div class="callout">
  <div class="callout-header">Τίτλος Μήνυσης Ανακάλυψης</div>
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  <div class="callout-container">
    <p>Πάρα πολλά κείμενα...</p>
  </div>
</div>

Αν θέλετε να απενεργοποιήσετε τη λειτουργία κλεισίματος της μήνυσης ανακάλυψης, προσθέστε ένα <span> στοιχείο, και να του ρυθμίσετε ένα onclick προσθήκη, η οποία σημαίνει "Όταν το κλικώ, κρύψτε το γονικό στοιχείο μου", δηλαδή το κουτί <div class="callout">.

Συμβουλή:Χρήση της HTML εικονικής αλληλεπίδρασης "&times;"Δημιουργία του γράμματος "x"."

Βήμα 2 - Προσθήκη CSS:

Για να οριστεί το στυλ του κουτιού μήνυσης ανακάλυψης και του κουμπιού κλεισίματος:

/* Κουτί μήνυσης ανακάλυψης - στέκεται σταθερά στο κάτω μέρος της σελίδας */
.callout {
  position: fixed;
  απόσταση κάτω: 35px;
  απόσταση δεξιάς: 20px;
  απόσταση αριστεράς: 20px;
  έως όριο πλάτους: 300px;
{}
/* Τίτλος μήνυσης ανακάλυψης */
.callout-header {
  πίνακας: 25px 15px;
  χρώμα: #555;
  font-size: 30px;
  χρώμα: λευκό;
{}
/* Κουτί μήνυσης ανακάλυψης/σώματος */
.callout-container {
  πίνακας: 15px;
  χρώμα περιβάλλοντος: #ccc;
  χρώμα: μαύρο
{}
/* Κουμπί κλεισίματος */
.closebtn {
  position: absolute;
  top: 5px;
  right: 15px;
  χρώμα: λευκό;
  font-size: 30px;
  cursor: pointer;
{}
/* Αλλαγή χρώματος όταν ο κύριος χρηστής τοποθετεί το ποντίκι του */
.closebtn:hover {
  χρώμα: χλωμό γκρι;
{}

Δοκιμάστε το προσωπικά

Σχετικές σελίδες

Εκμάθηση:Πώς να δημιουργήσω μήνυμα προειδοποίησης

Εκμάθηση:Πώς να δημιουργήσω σημειώσεις