Rumah > Artikel > hujung hadapan web > kotak pop timbul jquery hilang dalam beberapa saat
kotak pop timbul jquery hilang dalam beberapa saat
- 王林asal
- 2023-05-08 18:35:381056semak imbas
Dalam reka bentuk dan pembangunan web, kotak timbul biasanya digunakan untuk menggesa atau mengesahkan beberapa maklumat. Walau bagaimanapun, apabila kotak pop timbul kekal terlalu lama, ia akan menjejaskan pengalaman pengguna dan juga menghasilkan operasi pengguna yang tidak sah Oleh itu, cara untuk membuat kotak pop timbul hilang dalam masa beberapa saat adalah isu yang sangat penting. jQuery menyediakan penyelesaian mudah Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencapai kotak pop timbul yang hilang dalam beberapa saat.
1. Cipta kotak timbul
Sebelum anda bermula, anda perlu mencipta kotak timbul asas. Anda boleh menggunakan CSS dan HTML untuk mencipta kotak timbul mudah, seperti yang ditunjukkan di bawah:
<style>
.popup{
font-size: 16px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
background-color: #ffffff;
border: 1px solid #dddddd;
padding: 20px;
}
</style>
<div class="popup">
这是一个弹出框
</div>Di sini, div dengan pop timbul nama kelas dicipta, yang menetapkan gaya asas kotak timbul. Gaya boleh dilaraskan mengikut keperluan khusus dalam projek sebenar.
2. Gunakan jQuery untuk mengawal paparan dan menyembunyikan kotak pop timbul
jQuery menyediakan kaedah mudah untuk mengawal paparan dan menyembunyikan kotak pop timbul. Anda boleh menggunakan kod berikut untuk mencapai ini:
// 显示弹出框
$(".popup").show();
// 隐藏弹出框
$(".popup").hide();Di sini, pemilih jQuery digunakan untuk memilih elemen dengan pop timbul nama kelas, dan kaedah show() dan hide() digunakan untuk menunjukkan dan menyembunyikan kotak pop timbul. Walau bagaimanapun, kaedah ini tidak dapat mencapai tujuan kotak pop timbul hilang secara automatik.
3 Gunakan fungsi tunda untuk mengawal masa hilang kotak pop timbul
Untuk membuat kotak timbul hilang dalam beberapa saat, anda boleh menggunakan kelewatan jQuery() dan kaedah fadeOut(). Anda boleh menggunakan kod berikut untuk mencapai ini:
// 延迟3秒后隐藏弹出框
$(".popup").delay(3000).fadeOut();Di sini, kaedah delay() digunakan untuk menangguhkan masa hilang kotak pop timbul sebanyak 3 saat, dan kemudian kaedah fadeOut() digunakan untuk membuat kotak pop timbul hilang secara beransur-ansur dalam masa 3 saat. Ini mencapai kesan membuat kotak pop timbul hilang dalam masa beberapa saat.
4. Selesaikan pelaksanaan kod
Sekarang, kami telah memperkenalkan cara menggunakan jQuery untuk mencapai kesan kotak pop timbul hilang dalam beberapa saat. Berikut ialah pelaksanaan kod lengkap:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery弹出框几秒消失</title>
<style>
.popup{
font-size: 16px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 9999;
background-color: #ffffff;
border: 1px solid #dddddd;
padding: 20px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
// 显示弹出框
$(".popup").show();
// 延迟3秒后隐藏弹出框
$(".popup").delay(3000).fadeOut();
});
</script>
</head>
<body>
<div class="popup">
这是一个弹出框
</div>
</body>
</html>Di sini, pemilih jQuery digunakan untuk memilih elemen dengan pop timbul nama kelas, dan kemudian selepas halaman dimuatkan, kotak pop timbul pertama kali dipaparkan, dan kemudian kaedah delay() dan fadeOut() digunakan untuk merealisasikan pop timbul Kesan bingkai hilang selepas 3 saat.
Ringkasan
Artikel ini memperkenalkan cara menggunakan jQuery untuk mencapai kesan kotak pop timbul hilang dalam masa beberapa saat Pertama, anda perlu mencipta kotak pop timbul asas, dan kemudian gunakan pemilih jQuery dan show() , hide(), delay(), fadeOut() dan fungsi lain untuk mengawal paparan dan penyembunyian kotak pop timbul, dan akhirnya mencapai kesan kotak pop timbul hilang dalam beberapa saat. Semoga artikel ini bermanfaat kepada pemula.
Atas ialah kandungan terperinci kotak pop timbul jquery hilang dalam beberapa saat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!