Как я могу сделать один скрипт для всех модальных? - PullRequest
Новая
       2

Как я могу сделать один скрипт для всех модальных?

0 голосов
/ 20 января 2019

На той же странице у меня есть около дюжины изображений, и на каждом изображении по клику вы открываете модал. Я сделал скрипт для каждого модального вида, как я могу сделать один скрипт для всех модальных? 

<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myLele(this)" src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg" class="img-responsive"></div>
<div id="lele" class="modal">
<div class="modal-content" id="img11">
<span onclick="undici.style.display = 'none'" class="close">&times;</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale"></div>
</div> 
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
<img onclick="myJessy(this)" src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg" class="img-responsive"></div>
<div id="jessy" class="modal">
<div class="modal-content" id="img10">
<span onclick="dieci.style.display = 'none'" class="close">&times;</span>
<img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
<script>
   var undici = document.getElementById('lele');
   var lele = document.getElementById("img11");

function myLele(el) {
        var ImgSrc = el.src;
        undici.style.display = "block";
        lele.src = ImgSrc;
    }
    window.onclick = function (event) {
        if (event.target == undici) {
            undici.style.display = "none";
        }
    }
</script>
<script>
    var dieci = document.getElementById('jessy');
    var jessy = document.getElementById("img10");

function myJessy(el) {
        var ImgSrc = el.src;
        dieci.style.display = "block";
        jessy.src = ImgSrc;
    }
    window.onclick = function (event) {
        if (event.target == dieci) {
            dieci.style.display = "none";
        }
    }
</script>

Я пробовал разные способы, но не на нескольких модалах на одной странице не работает. Могу ли я сделать цикл foreach ()?

1 Ответ

0 голосов
/ 20 января 2019

идентификаторы должны быть уникальными для каждого элемента.Измените идентификаторы обоих ваших изображений с myImg на что-то уникальное, например myImg1 и myImg2 соответственно.

Кроме того, вам не нужно писать пользовательскую функцию для переключения модалов.Просто используйте встроенные модалы в Bootstrap, добавив data-toggle="modal" data-target="#lele" к вашему изображению модального 1 и data-toggle="modal" data-target="#jessy" к вашему изображению модального 2, например: 

<img src="/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
<img src="/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">

Вам также необходимо добавить атрибут data-dismissк вашей кнопке закрытия, как это: 

<span class="close" data-dismiss="modal">&times;</span>

Проверьте и запустите следующий фрагмент кода для практического примера того, что я описал выше: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- 1 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
  <img src="https://www.festadellamusicact.it/wp-content/uploads/leletronika.jpg" id="myImg1" class="img-responsive" data-toggle="modal" data-target="#lele">
</div>
<div id="lele" class="modal">
  <div class="modal-content" id="img11">
    <span class="close" data-dismiss="modal">&times;</span>
    <img src="https://www.festadellamusicact.it/wp-content/uploads/33407528_10216104175664929_3838668853781463040_n.jpg" class="img-responsive img-modale">
  </div>
</div> 
<!-- 2 Modal-->
<div class="gallery_product col-lg-3 col-md-3 col-sm-3 col-xs-3 filter mercoledì ombra">
  <img src="https://www.festadellamusicact.it/wp-content/uploads/jessy.jpg" id="myImg2" class="img-responsive" data-toggle="modal" data-target="#jessy">
</div>
<div id="jessy" class="modal">
  <div class="modal-content" id="img10">
    <span class="close" data-dismiss="modal">&times;</span>
    <img src="https://www.festadellamusicact.it/wp-content/uploads/29543_497687346938913_28179288_n.jpg" class="img-responsive img-modale">
  </div>
...