<a class="my_link" data-val="user1" href="#">modal link</a>

Saya memiliki tautan ini untuk membuka modal bootstrap, tetapi saya harus meneruskan atribut data "data-val". Saya mencoba dengan javascript tetapi saya tidak mendapatkannya. Bisakah kamu menolongku?

8
user3461461 17 Agustus 2017, 12:27

2 jawaban

Jawaban Terbaik

Anda dapat mendengarkan acara show.bs.modal di modal dan mendapatkan elemen yang diklik tersedia sebagai properti relatedTarget dari acara tersebut. Periksa modal Bootstrap dokumentasi untuk referensi lebih lanjut.

Berikut adalah contoh kerja menggunakan Bootstrap v4.

$('#my-modal').on('show.bs.modal', function (event) {
  var myVal = $(event.relatedTarget).data('val');
  $(this).find(".modal-body").text(myVal);
});
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<a href="#" class="my_link" data-val="user1" data-toggle="modal" data-target="#my-modal">Open Modal</a>

<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="my-modal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">My Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- jQuery, Popper and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
17
rmalviya 31 Januari 2019, 04:57

Anda hanya dapat mengatur modal

<div  class="modal fade" id="setTypeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Kemudian panggil dengan

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

Anda kemudian dapat mengakses elemen dalam modal menggunakan Jquery dll.

Dan akhirnya lakukan lebih banyak pekerjaan dengan acara klik dan tutup modal dengan

 $('#setTypeModal').modal('hide');
-1
pat capozzi 25 Oktober 2019, 16:43