Rumah > hujung hadapan web > tutorial css > 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
Lepaskan: 2024-10-30 07:22:02
asal
614 orang telah melayarinya

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>
Salin selepas log masuk

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;
}
Salin selepas log masuk

JavaScript:

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

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan