0

I have five buttons its may be multi buttons where on click bootstrap modal open. Its working fine but there is a problem how can I check where I clicked? Because modal is the same for all buttons.

This is my code:-

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal 1</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal 2</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal 3</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal 4</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal 5</button>
    
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Thanks!

Rohit Sharma
  • 3,304
  • 2
  • 19
  • 34
Rohit Verma
  • 3,657
  • 7
  • 37
  • 75
  • check `how-to-get-the-element-clicked-for-the-whole-document` https://stackoverflow.com/questions/9012537/how-to-get-the-element-clicked-for-the-whole-document – Jack jdeoel Jul 03 '18 at 10:21
  • Do you want to show a different text in the modal? What do you mean by `how can i check` technically? – Saif Jul 03 '18 at 10:22
  • If you don't want the same modal for all the buttons you just need to change the `data-target` attribute on them...? – Rory McCrossan Jul 03 '18 at 10:23
  • I want same modal should be open on each click but there will be different content so i have to check where i clicked. – Rohit Verma Jul 03 '18 at 10:27

3 Answers3

1
Please check this url. I think it solve your problem

https://jsfiddle.net/arpit84/aq9Laaew/67709/

Arpit Jain
  • 175
  • 5
1

You can use relatedTarget in modal's show.bs.modal or shown.bs.modal event

 $('#myModal').on('show.bs.modal', function (e) {
     var clickedBtn = $(e.relatedTarget);
     // write your code with clickedBtn
 });
Abhay Prince
  • 2,032
  • 1
  • 15
  • 17
0

Maybe this helps...

(Inspired by How to open a Bootstrap modal window using jQuery?)

function openModal(modalReference) {
  $('#myModal').modal('toggle');
  $('#myModal').modal('show');
  $('#myModal .text-container .number').text(modalReference);
  //$('#myModal').modal('hide');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info" onclick="openModal(1)">Open Modal 1</button>
<button type="button" class="btn btn-info" onclick="openModal(2)">Open Modal 2</button>
<button type="button" class="btn btn-info" onclick="openModal(3)">Open Modal 3</button>
<button type="button" class="btn btn-info" onclick="openModal(4)">Open Modal 4</button>
<button type="button" class="btn btn-info" onclick="openModal(5)">Open Modal 5</button>
    
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p class="text-container" >
            <span>Some text in the modal</span>
            <span class="number">NaN</span>
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>
empinator
  • 23
  • 5