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

Replicating Stack Overflow's Popup Messages

To replicate the popup messages seen on Stack Overflow when not logged in or when attempting to vote, consider this approach:

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

This code displays a floating message at the top of the page with a customizable message. A close button is also included for dismissal. Note that the specific CSS and JavaScript applied may vary depending on the context in which you use this solution.

The above is the detailed content of How to Replicate Stack Overflow\'s Floating Popup Messages in Your Website?. For more information, please follow other related articles on the PHP Chinese website!