如何检查我在哪里单击引导模态打开

Question

我有五个按钮，它可能是多个按钮，它们在单击引导程序模式时打开。 它的工作正常，但存在一个问题，如何检查我单击的位置？ 因为模态对于所有按钮都是相同的。

这是我的代码：

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

谢谢！

Answer 1

Please check this url. I think it solve your problem

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

Answer 2

您可以在模式的show.bs.modal或show.bs.modal事件中使用relatedTarget

 $('#myModal').on('show.bs.modal', function (e) {
     var clickedBtn = $(e.relatedTarget);
     // write your code with clickedBtn
 });

Answer 3

也许这有帮助...

（灵感来自于如何使用jQuery打开Bootstrap模态窗口？ ）

 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>