Bagaimana untuk mengklik pada latar belakang untuk menunjukkan dan menyembunyikan dalam jquery

Dengan kemajuan berterusan teknologi Internet, interaktiviti dalam reka bentuk web menjadi semakin penting. Antaranya, kesan khas seperti "klik pada latar belakang untuk menunjukkan / menyembunyikan" telah menjadi kaedah interaksi yang sangat praktikal dalam reka bentuk web. Realisasi kesan khas ini bergantung terutamanya pada jQuery, perpustakaan JavaScript yang berkuasa.

Jadi, bagaimana untuk mencapai kesan menunjukkan/menyembunyikan latar belakang dengan mengklik padanya? Di bawah, kami akan memperkenalkan langkah dan langkah berjaga-jaga khusus langkah demi langkah.

Langkah 1: Sediakan kod HTML dan CSS asas

Mula-mula, kita perlu mencipta kotak modal dan lapisan topeng separa lutsinar dalam HTML. Antaranya, atribut CSS bagi kotak modal ialah "display:none", yang bermaksud kotak modal tidak kelihatan secara lalai. Atribut CSS lapisan topeng ialah "display:block", yang bermaksud bahawa lapisan topeng kelihatan secara lalai:

<div class="mask"></div>
<div class="modal" style="display:none;">
  <!-- 模态框内容 -->
</div>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 1;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  padding: 20px;
  z-index: 2;
}
</style>

Langkah 2: Gunakan jQuery untuk memaparkan/menyembunyikan latar belakang pada klik

Connect Seterusnya, kita perlu menggunakan perpustakaan jQuery untuk melaksanakan kesan khas klik pada latar belakang untuk ditunjukkan/disembunyikan. Secara khusus, kita boleh menghantar kod berikut:

$(".mask").click(function () {
  $(".modal").hide();  // 隐藏模态框
  $(this).hide();      // 隐藏遮罩层
});

$(".modal").click(function (event) {
  event.stopPropagation(); // 阻止事件冒泡
});

$(".show-modal").click(function () {
  $(".modal").show();  // 显示模态框
  $(".mask").show();   // 显示遮罩层
});

Langkah 3: Analisis langkah demi langkah bagi kod

Pertama, kami menambah acara "klik" pada lapisan topeng klik pengguna Apabila menutup lapisan, operasi berikut akan dilakukan:

• Sembunyikan kotak modal ($(".modal").hide())
• Sembunyikan lapisan penutup ($( this).hide())

Pada masa yang sama, kami juga perlu ambil perhatian bahawa apabila pengguna mengklik pada kotak modal, kami tidak mahu keseluruhan kesan khas ditukar dimatikan. Oleh itu, kita perlu menambah acara "klik" pada modal dan menghentikan acara daripada menggelegak (event.stopPropagation()).

Akhir sekali, kita perlu menambah acara "klik" pada butang "Show Modal Box" Apabila pengguna mengklik butang, kotak modal dan lapisan topeng akan dipaparkan.

Langkah 4: Beberapa nota tentang gaya CSS

Dalam proses merealisasikan kesan khas ini, tetapan gaya CSS juga sangat kritikal. Di bawah, kami menyenaraikan beberapa butiran yang memerlukan perhatian:

• Lapisan topeng hendaklah ditetapkan kepada kedudukan "tetap" untuk memastikan kedudukan lapisan topeng tidak berubah apabila halaman ditatal.
• Kaedah kedudukan kotak modal hendaklah "ditetapkan", yang memastikan kotak modal sentiasa berada di tengah-tengah skrin.
• Nilai indeks z lapisan topeng dan kotak modal hendaklah lebih tinggi daripada nilai indeks z elemen lain untuk memastikan ia sentiasa berada di atas.

Ringkasnya, mengklik pada latar belakang untuk menunjukkan/menyembunyikan kesan khas ini sangat praktikal dalam reka bentuk web, dan ia boleh memberikan pengguna pengalaman interaktif yang lebih baik. Semasa proses pelaksanaan, kami boleh menggunakan perpustakaan jQuery untuk melaksanakan kesan khas ini dengan cepat, dan kami juga perlu memberi perhatian kepada tetapan gaya CSS. Saya harap artikel ini dapat membantu kebanyakan pereka web.

Atas ialah kandungan terperinci Bagaimana untuk mengklik pada latar belakang untuk menunjukkan dan menyembunyikan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!