Bagaimana untuk Meniru Mesej Pop Timbul Terapung Limpahan Tindanan dalam Tapak Web Anda?

Menerap Mesej Pop Timbunan Limpahan

Untuk meniru mesej timbul yang dilihat pada Limpahan Tindanan apabila tidak log masuk atau semasa cuba mengundi, pertimbangkan ini pendekatan:

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

Kod ini memaparkan mesej terapung di bahagian atas halaman dengan mesej yang boleh disesuaikan. Butang tutup juga disertakan untuk pemecatan. Ambil perhatian bahawa CSS dan JavaScript tertentu yang digunakan mungkin berbeza-beza bergantung pada konteks di mana anda menggunakan penyelesaian ini.

Atas ialah kandungan terperinci Bagaimana untuk Meniru Mesej Pop Timbul Terapung Limpahan Tindanan dalam Tapak Web Anda?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!