9
<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?

user3461461
  • 306
  • 2
  • 3
  • 16
  • Possible duplicate of [Passing data to a bootstrap modal](https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal) – rmalviya Aug 17 '17 at 09:30
  • doesn't work for me – user3461461 Aug 17 '17 at 09: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. – rmalviya Aug 17 '17 at 10:51

2 Answers2

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>
rmalviya
  • 1,847
  • 12
  • 39
-2

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');
pat capozzi
  • 1,412
  • 1
  • 20
  • 16