Heim > Web-Frontend > CSS-Tutorial > Wie replizieren Sie die schwebenden Popup-Nachrichten von Stack Overflow auf Ihrer Website?

Wie replizieren Sie die schwebenden Popup-Nachrichten von Stack Overflow auf Ihrer Website?

DDD
Freigeben: 2024-10-30 07:22:02
Original
613 Leute haben es durchsucht

How to Replicate Stack Overflow's Floating Popup Messages in Your Website?

Replikation der Popup-Meldungen von Stack Overflow

Berücksichtigen Sie Folgendes, um die Popup-Meldungen zu replizieren, die auf Stack Overflow angezeigt werden, wenn Sie nicht angemeldet sind oder versuchen, abzustimmen Ansatz:

Markup:

<div id='message' style="display: none;">
    <span>Hey, This is my Message.</span>
    <a href="#" class="close-notify">X</a>
</div>
Nach dem Login kopieren

CSS:

#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

.close-notify {
    white-space: nowrap;
    float:right;
    margin-right:10px;
    color:#fff;
    text-decoration:none;
    border:2px #fff solid;
    padding-left:3px;
    padding-right:3px
}

.close-notify a {
    color: #fff;
}
Nach dem Login kopieren

JavaScript:

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});
Nach dem Login kopieren

Dieser Code zeigt oben auf der Seite eine schwebende Nachricht mit einer anpassbaren Nachricht an. Zum Schließen ist auch ein Schließen-Button enthalten. Beachten Sie, dass das spezifische angewendete CSS und JavaScript je nach Kontext, in dem Sie diese Lösung verwenden, variieren kann.

Das obige ist der detaillierte Inhalt vonWie replizieren Sie die schwebenden Popup-Nachrichten von Stack Overflow auf Ihrer Website?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage