Откройте несколько разных фреймов

Question

У меня на сайте много изображений, и через каждое из них вы можете открыть различную iframe, которая включает в себя интерактивную рекламу, связанную с изображением, с которого вы ее открыли.
Дело в том, что с кодом, который я использую, я могу открыть только первый iframe.
Вот демонстрация моего сайта и то, что я пытаюсь сделать. Вы можете видеть, что если вы нажмете на изображения, вы только я смогу открыть первый iframe:
http://kickads.mobi/richmediagallery/index_test_iframe.html

Я хочу знать, может ли кто-нибудь помочь мне решить эту проблему.

Я использую код JS:

<script>
    // Get the modal
    var modal = document.getElementById('MyModal');

    // Get the button that opens the modal
    var div = document.getElementById("myDiv");

    // Get the button that opens the modal
    var img = document.getElementById("myImg");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];   

    // When the user clicks on the button, open the modal 
    div.onclick = function() {
        modal.style.display = "block";
    } 

    // When the user clicks on the button, open the modal 
    img.onclick = function() {
        modal.style.display = "block";
    }  

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    var freezeVp = function(e) {
        e.preventDefault();
    }; 
</script>

А вот демонстрация того, как изображение открывает iframe:

 <div id="ad1" class="portfolio-item deporte col-md-3">
     <div class="portfolio-box">
         <div class="portfolio-image-wrap">
             <img id="myImg" src="img/portfolio/image.jpg" alt="" />
         </div>
         <div class="portfolio-caption-mask" id="myDiv">
             <div class="portfolio-caption-text">
                 <div class="portfolio-caption-tb-cell">
                     <h5 class="alt-title">Puzzle ad</h5>
                     <p>Nike Made to fly</p>
                 </div>
             </div>
         </div>
     </div>
 </div>
 <div id="MyModal" class="modal">
     <span class="close">&times;</span>
     <div class="contenido">
         <iframe style="height: 480px; width: 320px" src="http://kickads.mobi/test/ad" frameborder="0"></iframe>
     </div>
 </div> 

Answer 1

Как уже было сказано, вы не можете вызывать несколько элементов, используя одинаковые идентификаторы. Два элемента не могут иметь одинаковый идентификатор.

Если вы хотите назначить несколько элементов в одной переменной, я рекомендую вам использовать: var div = document.getElementsByClassName("name"); Подробнее здесь .