kotak pop timbul tetapan jquery

jquery ialah perpustakaan yang pantas, kecil dan berkuasa untuk JavaScript. Dalam pembangunan web, kotak pop timbul adalah salah satu teknologi yang sering digunakan. Melalui jquery, kita boleh menetapkan kesan kotak pop timbul dengan mudah Artikel ini akan memperkenalkan cara menggunakan jquery untuk melaksanakan kotak pop timbul.

1. Import fail perpustakaan jquery

Sebelum menggunakan jquery, anda perlu mengimport fail perpustakaan jquery terlebih dahulu. Anda boleh memuat turun versi terkini jquery dari laman web rasmi Kaedah pengenalan adalah seperti berikut:

<!-- 引入jquery库文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Gunakan jquery untuk menetapkan kotak pop timbul

1. Tetapkan secara manual. kotak timbul

kami Kotak timbul boleh ditetapkan secara manual dengan klik tetikus atau mencetuskan acara. Mula-mula, kita perlu mencipta kotak pop timbul dan tambah kod berikut pada HTML:

<!-- 弹出框 -->
<div class="popup">
  <h2>弹出框标题</h2>
  <p>弹出框内容</p>
  <button class="close-btn">关闭</button>
</div>

Seterusnya, kita perlu menggunakan jquery untuk mengawal paparan dan menyembunyikan kotak pop timbul. Kita boleh mencapainya dengan cara berikut:

$(function(){
  // 首先隐藏弹出框
  $('.popup').hide();

  // 点击事件触发弹出框显示
  $('#show-popup-btn').click(function(){
    $('.popup').fadeIn();
  });

  // 点击事件触发弹出框隐藏
  $('.close-btn').click(function(){
    $('.popup').fadeOut();
  });
});

Dalam kod, kami menggunakan kaedah fadeIn dan fadeOut jquery untuk memaparkan dan menyembunyikan kotak pop timbul. Apabila pengguna mengklik butang, kotak pop timbul perlahan-lahan akan pudar ke dalam skrin, dan apabila pengguna mengklik butang tutup, kotak pop timbul perlahan-lahan akan pudar keluar dari skrin.

2. Kotak pop timbul automatik

Kadangkala, kita perlu memunculkan kotak secara automatik selepas halaman dimuatkan. Pada masa ini, kita boleh menggunakan kaedah sedia jquery untuk secara automatik muncul kotak selepas halaman dimuatkan. Kodnya adalah seperti berikut:

$(document).ready(function(){
  // 首先隐藏弹出框
  $('.popup').hide();

  // 自动触发弹出框显示
  $('.popup').fadeIn();

  // 点击事件触发弹出框隐藏
  $('.close-btn').click(function(){
    $('.popup').fadeOut();
  });
});

Dalam kod, kami menggunakan kaedah sedia jquery untuk mencetuskan paparan kotak timbul selepas halaman dimuatkan.

3. Gunakan jquery untuk menetapkan gaya kotak pop timbul

Melalui jquery, kita boleh menetapkan gaya kotak pop timbul dengan mudah. Contohnya, tetapkan lebar, ketinggian, warna latar belakang, saiz fon, dsb. kotak pop timbul. Berikut ialah beberapa tetapan gaya:

$('.popup').css({
  'width': '400px',
  'height': '200px',
  'background-color': '#fff',
  'font-size': '16px'
});

Dalam kod, kami menggunakan kaedah css jquery untuk menetapkan gaya kotak pop timbul. Tetapan gaya boleh dibuat mengikut keperluan sebenar.

Kesimpulan:

Artikel ini memperkenalkan secara ringkas cara untuk menetapkan kesan kotak pop timbul melalui jquery Selain mengawal paparan dan menyembunyikan kotak pop timbul secara manual, anda juga boleh secara automatik pop timbul kotak dan tetapkan gaya kotak timbul . Semoga artikel ini bermanfaat kepada semua.

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