Kotak pop timbul melompat dalam jquery

Dengan kemajuan berterusan teknologi web, lompatan timbul semakin banyak digunakan dalam pembangunan bahagian hadapan. Antaranya, kesan lompat pop timbul jQuery disukai oleh banyak pembangun. Artikel ini akan memperkenalkan langkah khusus dan demonstrasi praktikal jQuery untuk melaksanakan lompat timbul.

1. Gambaran keseluruhan kotak pop timbul

Kotak timbul biasanya digunakan untuk memaparkan kotak gesaan pada halaman semasa untuk memaparkan beberapa maklumat atau mengingatkan pengguna untuk melakukan operasi. Jump bermakna apabila anda mengklik butang atau pautan dalam kotak gesaan, anda akan melompat terus ke halaman yang sepadan. Kelebihan lompat pop timbul ialah ia boleh meningkatkan pengalaman interaksi pengguna dan mencapai kesan lompatan tanpa keluar dari halaman semasa.

2. Langkah untuk jQuery melaksanakan lompat kotak timbul

jQuery melaksanakan fungsi kotak timbul dengan memanggil kaedah dialog() dan melaksanakan fungsi lompat halaman dengan memanggil tetingkap .location.href() kaedah. Langkah-langkah khusus adalah seperti berikut:

1 Import perpustakaan jQuery

Sebelum melaksanakan lompat kotak pop timbul jQuery, anda perlu memperkenalkan perpustakaan jQuery terlebih dahulu. Ia boleh diperkenalkan dalam teg skrip pengepala:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Cipta kotak pop timbul

Gunakan kaedah dialog() dalam pemalam UI jQuery untuk mencipta pop timbul kotak. Anda boleh menyesuaikan elemen dan kandungan dalam kotak pop timbul dll. Sebagai contoh, buat kotak timbul mudah:

<div id="dialog-box">
  <p>这是一个弹框</p>
  <a href="#" class="btn">跳转</a>
</div>

<script>
$("#dialog-box").dialog({
  autoOpen:false,
  modal:true,
  buttons:{
    "确定":function(){
      $(this).dialog("close");
    }
  }
});
</script>

Dalam kod di atas, atribut autoOpen ditetapkan kepada palsu untuk tidak membuka kotak pop timbul secara automatik supaya apabila kawasan di luar kotak pop timbul diklik, kotak pop timbul tidak akan Tutup butang dalam kotak timbul boleh disesuaikan dalam atribut butang.

3. Panggil window.location.href dalam kotak timbul untuk melompat

Tambah butang atau pautan dalam kotak timbul dan panggil window.location.href dalam klik peristiwa butang atau pautan Selesaikan lompatan halaman. Sebagai contoh, tambahkan butang "lompat" pada kotak timbul di atas:

<a href="#" class="btn">跳转</a>

<script>
$(".btn").click(function(){
  window.location.href = "http://www.example.com";
});

3. contoh demonstrasi lompat kotak pop timbul jQuery

Berikut ialah kotak pop timbul jQuery yang lengkap contoh lompat dan tunjuk cara Ketahui cara membuat kotak timbul dan lompat ke halaman baharu dalam kotak timbul:

  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  


  

    
确定要离开该页面吗？
    确定
  

  <script>
    $("#dialog-box").dialog({
      autoOpen:false,
      modal:true,
      buttons:{
        "取消":function(){
          $(this).dialog("close");
        }
      }
    });

    $(".btn").click(function(){
      window.location.href = "http://www.example.com";
    });

    window.onbeforeunload = function(){
      $("#dialog-box").dialog("open");
    };
  </script>

Dalam contoh ini, apabila pengguna cuba meninggalkan halaman semasa, kotak pengesahan akan timbul. Jika pengguna mengklik butang "OK", mereka akan diubah hala ke halaman "example.com". Jika pengguna mengklik butang "Batal", kotak pop timbul ditutup dan kekal pada halaman semasa.

Ringkasan

Artikel ini memperkenalkan secara ringkas langkah-langkah dan contoh demonstrasi jQuery untuk melaksanakan lompatan kotak timbul. Menggunakan kotak pop timbul untuk melompat boleh meningkatkan pengalaman interaksi pengguna dan membawa kemudahan kepada pengguna. Pembangun bahagian hadapan adalah perlu untuk memahami dan menguasai pengetahuan lompat timbul jQuery.

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