Wie replizieren Sie die schwebenden Popup-Nachrichten von Stack Overflow auf Ihrer 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!