Two modals with different ID show the same content-CodePudding

I'm trying to code a page where, on clicking different areas of a map, different modals with different content pop up. However, when I click on either area, the same content shows up (and the "close" button doesn't work). I gave them different IDs, and they get triggered by different areas. Do you have an idea what the problem can be?

Here's what I have:

.modal { display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0; top: 0; } /* Modal Content/Box */

.modal-content { margin: 15% auto; padding: 20px; } /* The Close Button */

.close { float: right;
font-size: 28px; }

.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }

<map name="2042434">
        <area onclick="myFunction1()" shape="poly" coords="46,59,65,45,96,70,198,95,337,173,348,217,348,274,391,296,361,438,235,440,238,258,48,59,61,64" alt="">
        <area onclick="myFunction2()" shape="poly" coords="393,296,349,274,347,217,374,208,425,230,440,203,429,162,446,152,513,192,548,184,582,238,577,329,493,380,490,398,409,435,362,440,380,336" alt="">
        </map>
<img src="https://www.google.com/imgres?imgurl=https://guide-goyav.com/wp-content/uploads/2020/05/Secteur-de-la-ville.png&imgrefurl=https://guide-goyav.com/visiter-grenoble/&tbnid=3gtWJdaEDshRYM&vet=12ahUKEwjc1tGmvdX4AhUa04UKHWylBqsQMygeegUIARCJAg..i&docid=Zqq3LZ57uAb2-M&w=618&h=626&q=carte grenoble&ved=2ahUKEwjc1tGmvdX4AhUa04UKHWylBqsQMygeegUIARCJAg" alt="" border="0" width="703" height="794" usemap="#2042434">

<!-- MODAL 1 -->
<div id="modal1" >
    <div >
    <span >&times;</span> <!--the close button-->
    <p>Some text in the Modal..</p>
    </div>
</div>

<script>var modal=document.getElementById("modal1");
var span=document.getElementsByClassName("close")[0];

function myFunction1() {
  modal.style.display="block";
}

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

window.onclick=function(event) {
  if (event.target==modal1) {
    modal.style.display="none";
  }
}

</script>

<!-- MODAL 2 -->

<div id="modal2" >
    <div >
    <span >&times;
    </span><p>So2ext 2 th2Mo22..</p>
    </div>
</div>

<script>var modal=document.getElementById("modal2");
var span=document.getElementsByClassName("close")[0];

function myFunction2() {
  modal.style.display="block";
}

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

window.onclick=function(event) {
  if (event.target==modal2) {
    modal.style.display="none";
  }
}

</script>

Thanks!

Hannah

CodePudding user response：

<script>
  (function() {

    // your code here will be safe and won't pollute other areas of your code
    
  })();
</script>

CodePudding user response：

<div id="modal1" >
            <div >
                <span >&times;</span> <!--the close button-->
                <p>Some text in the Modal..</p>
            </div>
        </div>

        <!-- MODAL 2 -->
        <div id="modal2" >
            <div >
                <span >&times;</span>
                <p>So2ext 2 th2Mo22..</p>
            </div>
        </div>
        
        function closeModal() {
            document.querySelectorAll('.modal').forEach(function (modal) {
                modal.style.display = 'none';
            })
        }

        document.querySelectorAll('span.close').forEach(function (element) {
            //close all modal
            element.addEventListener('click', function (e) {
                    closeModal();
                }
            )
        });
        document.querySelectorAll('.modal').forEach(function (element) {
            //close all modal
            element.addEventListener('click', function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                }
            )
        });

        function myFunction1() {
            let modal = document.getElementById("modal1");
            modal.style.display = "block";
        }

        function myFunction2() {
            let modal = document.getElementById("modal2");
            modal.style.display = "block";
        }
        const getParents = el => {
            for (var parents = []; el; el = el.parentNode) {
                parents.push(el.id);
            }

            return parents.join(',');
        };
        document.body.addEventListener('click', (e) => {
            let element = getParents(e.target);//return: ,,modal2,,, or ,,modal1,,,
            if(element.includes("modal")===-1){
                //click outside modal
                closeModal();
            }
        }, true);