javascript - Pass data attribute to modal bootstrap - Stack Overflow

admin管理员组

文章数量:1192947

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

I have this link to open a bootstrap modal, but I need to pass data attribute "data-val". I tried with javascript but I didn't get it. Can you please help me?

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

I have this link to open a bootstrap modal, but I need to pass data attribute "data-val". I tried with javascript but I didn't get it. Can you please help me?

• javascript
• modal-dialog

Share Improve this question Follow asked Aug 17, 2017 at 9:27 user3461461user3461461 32622 gold badges33 silver badges1919 bronze badges 3

• Possible duplicate of Passing data to a bootstrap modal – rmbits Commented Aug 17, 2017 at 9:30
• doesn't work for me – user3461461 Commented Aug 17, 2017 at 9:43
• You need to set href or data-toggle attribute of link to the id of the modal with a # symbol in front of it. Anyways, a working example is in answer. – rmbits Commented Aug 17, 2017 at 10:51

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 22

You can listen for show.bs.modal event on modal and get the clicked element available as relatedTarget property of the event. Check Bootstrap modal documentation for further reference.

Here is a working example using 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>

You can just set up the modal

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

Then call it with

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

You can then access the elements in the modal using Jquery etc.

and finally do some more work with a click event and close the modal with

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

本文标签： javascriptPass data attribute to modal bootstrapStack Overflow