Bagaimana untuk Menghantar Data dari Hiperpautan ke Modal Bootstrap?

Mengirim Data ke Modal Bootstrap

Tetingkap modal ialah elemen biasa dalam antara muka pengguna, membenarkan pengguna berinteraksi dengan kandungan tertentu tanpa meninggalkan halaman semasa. Artikel ini membincangkan penyelesaian kepada masalah menghantar data kepada modal apabila membukanya.

Masalah:

Pembangun web sering menghadapi keperluan untuk menghantar data daripada hiperpautan ke tetingkap modal. Sebagai contoh, pertimbangkan antara muka pengguna dengan hiperpautan yang mempunyai ID unik dilampirkan. Apabila diklik, pautan ini harus membuka tetingkap modal dan menyerahkan ID kepada modal. Walau bagaimanapun, ramai pembangun menghadapi kesukaran dalam melaksanakan fungsi ini.

Penyelesaian:

Satu penyelesaian berkesan untuk masalah ini ialah menggunakan acara .on jQuery pengendali. Berikut ialah penjelasan langkah demi langkah tentang cara untuk mencapai penghantaran data:

1. Penanda HTML: Tentukan hiperpautan dengan atribut data yang mengandungi ID unik. Sertakan medan input tersembunyi dalam modal untuk menangkap data yang diluluskan:

<a data-toggle="modal" data-id="ISBN564541" class="open-AddBookDialog">Link 1</a>

<div class="modal hide">
<ol start="2"><li>
<strong>JavaScript</strong>: Ikat acara klik pada hiperpautan dan ekstrak nilai atribut data . Kemas kini input tersembunyi dalam modal sewajarnya:</li></ol>
<pre class="brush:php;toolbar:false">$(document).on("click", ".open-AddBookDialog", function () {
  var myBookId = $(this).data('id');
  $(".modal-body #bookId").val(myBookId);
});

3. Pilihan: Jika mahu, paparkan modal dengan memanggil fungsi modal('show') secara manual:

$('#addBookDialog').modal('show');

Tambahan Nota:

• Penyelesaian yang disediakan menggunakan pengendalian acara yang diwakilkan, yang lebih cekap daripada mengikat acara kepada elemen individu.
• Tidak perlu memanggil modal('show secara manual '), kerana peristiwa klik pada elemen togol modal akan memaparkan mod secara automatik.

Dengan mengikuti langkah ini, pembangun boleh menghantar data dengan berkesan daripada hiperpautan ke tetingkap modal, meningkatkan pengalaman pengguna dan memudahkan aliran kerja pembangunan.