Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menghantar Data dari Hiperpautan ke Modal Bootstrap?

Bagaimana untuk Menghantar Data dari Hiperpautan ke Modal Bootstrap?

DDD
Lepaskan: 2024-12-13 00:08:11
asal
608 orang telah melayarinya

How to Pass Data from Hyperlinks to a Bootstrap Modal?

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">
Salin selepas log masuk
  1. JavaScript: Ikat acara klik pada hiperpautan dan ekstrak nilai atribut data . Kemas kini input tersembunyi dalam modal sewajarnya:
$(document).on("click", ".open-AddBookDialog", function () {
  var myBookId = $(this).data('id');
  $(".modal-body #bookId").val(myBookId);
});
Salin selepas log masuk
  1. Pilihan: Jika mahu, paparkan modal dengan memanggil fungsi modal('show') secara manual:
$('#addBookDialog').modal('show');
Salin selepas log masuk

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.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data dari Hiperpautan ke Modal Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan