Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Meniru Mesej Pop Timbul Terapung Limpahan Tindanan dalam Tapak Web Anda?

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

DDD
DDDasal
2024-10-30 07:22:02559semak imbas

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

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn