jquery memadam kotak pop timbul yang dipaparkan-Soal Jawab bahagian hadapan-php.cn

jquery memadam kotak pop timbul yang dipaparkan

WBOY

Lepaskan： 2023-05-28 11:43:37

asal

319 orang telah melayarinya

Apabila aplikasi web menjadi semakin popular, cara berinteraksi dengan pengguna juga sentiasa berubah. Pop timbul ialah cara yang boleh dipercayai untuk menggesa pengguna dengan sesuatu yang mereka perlu beri perhatian, bertanya kepada pengguna sama ada untuk melakukan tindakan atau memaparkan mesej kejayaan. Walau bagaimanapun, apabila lapisan pop timbul tidak lagi diperlukan, adalah lebih baik untuk mengalih keluarnya daripada halaman untuk mengelakkan kekeliruan visual bagi pengguna.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk mengalih keluar kotak pop timbul yang dipaparkan. jQuery ialah perpustakaan JavaScript yang digunakan secara meluas yang telah menjadi salah satu alat pilihan untuk pembangun.

Langkah 1: Tambah HTML dan CSS

Mula-mula, kita perlu menambah HTML dan CSS pada halaman untuk mencipta kotak timbul. Dalam contoh ini, kami akan mencipta div mudah yang akan berfungsi sebagai popover kami.

Kod HTML kelihatan seperti ini:

<div class="popup">
  <h2>提示</h2>
  <p>欢迎来到我的网站！</p>
  <button class="close">关闭</button>
</div>

Salin selepas log masuk

Kami juga perlu menambah gaya CSS pada div ini untuk memusatkannya pada halaman dan menjadikannya kelihatan seperti lapisan pop timbul.

Kod CSS kelihatan seperti ini:

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.popup h2 {
  font-size: 18px;
  margin-top: 0;
}

.popup p {
  margin-bottom: 0;
}

.close {
  background-color: #ccc;
  border: none;
  color: #fff;
  padding: 5px 10px;
  cursor: pointer;
  float: right;
  margin-top: 10px;
}

Salin selepas log masuk

Kod CSS ini akan mencipta kotak pop timbul asas dalam halaman dan meletakkannya di tengah halaman. Ia juga menambah butang tutup pada pop timbul supaya ia boleh ditutup apabila pop timbul tidak lagi diperlukan.

Langkah 2: Paparkan pop timbul

Sekarang kami telah mencipta pop timbul, langkah seterusnya ialah memaparkannya apabila diperlukan. Untuk melakukan ini, kami akan menggunakan kaedah show() jQuery.

Kod jQuery kelihatan seperti ini:

$(document).ready(function() {
  $('.show-popup').click(function() {
    $('.popup').show();
  });
});

Salin selepas log masuk

Kod ini akan menemui elemen (seperti butang) bernama .show-popup pada halaman Apabila pengguna mengklik elemen ini, pop timbul kotak akan muncul. Ia akan dipaparkan menggunakan kaedah show().

Langkah 3: Tutup pop timbul

Apabila pengguna telah menyelesaikan tindakan yang berkaitan dengan pop timbul, adalah lebih baik untuk mengalih keluarnya daripada halaman. Untuk melakukan ini, kami akan menggunakan kaedah remove() jQuery.

Kod jQuery kelihatan seperti ini:

$(document).ready(function() {
  $('.close').click(function() {
    $('.popup').remove();
  });
});

Salin selepas log masuk

Kod ini akan menemui elemen bernama .close (butang tutup) pada halaman Apabila pengguna mengklik elemen ini, kotak pop timbul akan gunakan kaedah remove() keluarkan daripada halaman.

Langkah 4: Lengkapkan Kod

Akhir sekali, kami akan menyatukan semua coretan kod supaya ia mencipta pop timbul yang berfungsi.

Kod lengkap kelihatan seperti ini:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery删除显示的弹框</title>
  <style>
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      z-index: 9999;
    }

    .popup h2 {
      font-size: 18px;
      margin-top: 0;
    }

    .popup p {
      margin-bottom: 0;
    }

    .close {
      background-color: #ccc;
      border: none;
      color: #fff;
      padding: 5px 10px;
      cursor: pointer;
      float: right;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <button class="show-popup">显示弹框</button>
  <div class="popup">
    <h2>提示</h2>
    <p>欢迎来到我的网站！</p>
    <button class="close">关闭</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.show-popup').click(function() {
        $('.popup').show();
      });

      $('.close').click(function() {
        $('.popup').remove();
      });
    });
  </script>
</body>
</html>

Salin selepas log masuk

Kini, apabila pengguna mengklik butang "Tunjukkan Pop Timbul", pop timbul akan dipaparkan menggunakan kaedah show(). Apabila pengguna mengklik butang tutup, pop timbul dialih keluar daripada halaman menggunakan kaedah remove().

Ringkasan

Dalam artikel ini, kami telah mempelajari cara menggunakan jQuery untuk mencipta dan mengalih keluar pop timbul yang dipaparkan. Pop timbul ialah cara terbaik untuk berinteraksi dengan pengguna, tetapi jika digunakan secara salah, ia boleh merendahkan pengalaman pengguna. Sebaik-baiknya hanya tunjukkan tetingkap timbul apabila perlu dan gunakan jQuery untuk mengalih keluarnya untuk memastikan halaman bersih dan mudah digunakan.

Atas ialah kandungan terperinci jquery memadam kotak pop timbul yang dipaparkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!