how to open multiple modal bootstrap with different id

Question

i want to ask how to open multiple modal bootstrap with different 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?

i don't use javascript code only code above, if use javascript code how to show different id sir?

thanks before

Felix Jr · Answer 1 · 2018-12-23T15:22:15.500

You need to create two different modals with different IDs.

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

sorry sir for late respon, but your code for modal in one page, and my code modal for open the modal from another file html — creat15, Dec 25 '18 at 16:15
I see. You should check this https://stackoverflow.com/a/34763263/5425834 — Felix Jr, Jan 03 '19 at 19:23

score 0 · Answer 2 · answered Nov 30 '19 at 11:15

Your can store the ids in an array like this:
For Example in my case the HTML Code was like this:-

<img id="myImg8" src="images (2).jpg" style="width:100%" alt="Snow"> 
<img id="myImg9" src="images (3).jpg" style="width:100%" alt="Snow">
<img id="myImg10" src="plant.jpg" alt="Snow">
<img id="myImg11" src="images (4).jpg" style="width:100%" alt="Snow"> 
<img id="myImg12" src="images (5).jpg" style="width:100%" alt="Snow">
<img id="myImg13" src="images.jpg" style="width:100%" alt="Snow">
<img id="myImg14" src="images.jpg" style="width:100%" alt="Snow">
<img id="myImg15" src="images.png" style="width:100%" alt="Snow">
<img id="myImg16" src="1_RWHxIXnOrhsOAxmlDmCpDg.png" style="width:100%" alt="Snow">

<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

<!--Javascript-->
<script>
var modal = document.getElementById("myModal");
    var arr = ["myImg0","myImg1","myImg2", "myImg3", "myImg4", "myImg5", "myImg6", 
    "myImg7", "myImg8", "myImg9", "myImg10", "myImg11", "myImg12", "myImg13", 
    "myImg14", "myImg15", "myImg16", "myImg17", "myImg18", "myImg19", "myImg20"];
    for(var i=0;i< arr.length;i++)
    {
        var img = document.getElementById(arr[i]);
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");
        img.onclick = function () {
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
    var span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
        modal.style.display = "none";
 }
<script>

how to open multiple modal bootstrap with different id

2 Answers2