как открыть несколько модальных бутстрапов с разными идентификаторами - PullRequest
Новая
       18

как открыть несколько модальных бутстрапов с разными идентификаторами

0 голосов
/ 23 декабря 2018

Я хочу спросить, как открыть несколько модальных бутстрапов с разными идентификаторами

У меня есть модальный код, подобный этому: 

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

, и этот код для показа модальных: 

<div class="modal fade" id="theModal" style="z-index:9999999;">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>

если я использую код выше, модал показывает, что только один (1) модал не может показывать два модальных или несколько модальных с различным идентификатором, как показать несколько модальных с моим кодом, сэр?

я не знаюне использовать код JavaScript только код выше, если использовать код JavaScript, как показать другой идентификатор сэр?

спасибо, прежде чем

1 Ответ

0 голосов
/ 23 декабря 2018

Вам нужно создать два разных модала с разными идентификаторами. 

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