javascript - 如何打开具有不同id的多个模式引导程序(how to open multiple modal bootstrap with different id)

Question

i want to ask how to open multiple modal bootstrap with different id(我想问一下如何使用不同的ID打开多个模式引导程序)

i have modal code like this :(我有这样的模态代码：) <a href="../popup/first.html" data-target="#theModal" data-toggle="modal"> <div class="col span_1_of_3"> <center> <span><h3>Voucher</h3></span> <img src="../imgs/myimg1.png" class="imgs"> </center> </div> </a> <a href="../popup/two.html" data-target="#theModal" data-toggle="modal"> <div class="col span_1_of_3"> <center> <span><h3>Voucher</h3></span> <img src="../imgs/myimg2.png" class="imgs"> </center> </div> </a> and this code for show the modal :(而此代码用于显示模式：) <div class="modal fade" id="theModal" style="z-index:9999999;"> <div class="modal-dialog"> <div class="modal-content"> </div> </div> </div> if i use code above the modal only show one (1) modal can't show two modal or multiple modal with different id, how to show multiple modal with my code sir?(如果我使用模态以上的代码仅显示一（1）个模态，而不能显示两个模态或具有不同ID的多个模态，那么如何用我的代码先生显示多个模态？) i don't use javascript code only code above, if use javascript code how to show different id sir?(我不使用上面的javascript代码，如果使用javascript代码如何显示不同的ID先生？) thanks before(之前感谢)   ask by creat15 translate from so

Answer 1

You need to create two different modals with different IDs.(您需要创建两个具有不同ID的不同模态。)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <a href="#" data-target="#theModal-1" data-toggle="modal"> <div class="col span_1_of_3"> <center> <span> <h3>Voucher 1</h3> </span> </center> </div> </a> <br><br> <a href="#" data-target="#theModal-2" data-toggle="modal"> <div class="col span_1_of_3"> <center> <span> <h3>Voucher 2</h3> </span> </center> </div> </a> <div class="modal fade" id="theModal-1" style="z-index:9999999;" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">Title 1</div> <div class="modal-body"> This is modal 1 </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="theModal-2" style="z-index:9999999;" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">Title 2</div> <div class="modal-body"> This is modal 2 </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>