Question

我想问一下如何打开具有不同ID的多个模式引导程序

我有这样的模态代码：

+----------------+------------+------+-----+---------+-------+
| Field          | Type       | Null | Key | Default | Extra |
+----------------+------------+------+-----+---------+-------+
| appointment_id | bigint(20) | NO   | MUL | NULL    |       |
| service_id     | bigint(20) | NO   | PRI | NULL    |       |
+----------------+------------+------+-----+---------+-------+

，此代码用于显示模式：

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

如果我在模态上方使用代码仅显示一（1）个模态不能显示两个模态或具有不同id的多个模态，那么如何用我的代码先生显示多个模态？

我不使用上面的仅javascript代码，如果使用javascript代码如何显示不同的id先生？

先感谢

Answer 1

您需要创建两个具有不同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>

Answer 2

您可以将ID存储在这样的数组中：
例如，在我的例子中，HTML代码是这样的：-

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

如何打开具有不同id的多个模式引导程序

2 个答案: