使用多个Id标签激活闭合范围元素

Question

In the following code, I have multiple modal image elements on the page. For each of these elements I am using an "X" close span element.

First Modal:

<div id="myModal" class="modal">
<span class="close">×</span>
<div id="carousel-example-generic" class="carousel slide" >  @*data-ride="carousel"*@

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img class="img-responsive  center-block" src="foo" alt="Navigation">
            <div class="carousel-caption">
            Caption Here
            </div>
        </div>
        <div class="item">
            <img class="img-responsive  center-block" src="foo" alt="">
            <div class="carousel-caption">
                Caption Here
            </div>
        </div>
        <div class="item">
            <img class="img-responsive  center-block" src="foo" alt="">
            <div class="carousel-caption">
                Caption Here
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

Second Modal:

<div id="myModal2" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img02" src="~/Images/Site/banner.jpg" alt="Completion Certifiate for Compliance Training">
<div id="caption"></div>

Javascript:

var modal = document.getElementById('myModal');

var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");


img.onclick = function () {
    modal.style.display = "block";

}

var span = document.getElementsByClassName("close")[0];

span.onclick = function () {
modal.style.display = "none";
}



var modal2 = document.getElementById('myModal2');

var img2 = document.getElementById('myImg2');
var modalImg2 = document.getElementById("img02");


img2.onclick = function () {
    modal2.style.display = "block";

}
var span = document.getElementsByClassName("close")[0];

span.onclick = function () {

    modal2.style.display = "none";
}

The problem I am having is that when I try to assign invidual close functions the first will work, but the second will not. I need both to act as Close elements on their respective Modals. Any help is greatly appreciated

Answer 1

var spans = document.getElementsByClassName("close");

for ( var i = 0; i < spans.length; i++ ) {
  spans[i].addEventListener('click', function(event) {
    event.preventDefault();
    console.log("clicked", this);
    //hide your modal here... 
  });
}