Heim  >  Artikel  >  Web-Frontend  >  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
DDDOriginal
2024-10-30 07:22:02562Durchsuche

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>

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;
}

JavaScript:

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

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!

Stellungnahme:
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