0

I have the following code and i am trying to open 2 different modals in each separate link.

modal link 1 -> open modal1 modal link 2 -> open modal2

<p data-height="265" data-theme-id="0" data-slug-hash="gWKOmP" data-default-tab="css,result" data-user="pansotdev" data-embed-version="2" data-pen-title="2 modals" class="codepen">See the Pen <a href="https://codepen.io/pansotdev/pen/gWKOmP/">2 modals</a> by Sotiris Panagopoulos (<a href="http://codepen.io/pansotdev">@pansotdev</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
sot
  • 45
  • 6

1 Answers1

0

https://codepen.io/anon/pen/OGdXXr

I correct your code I will let you play with the last function cos you have to determine exactly where we must click (which element) to close your modals.

also, one ID must be unique you can have the same id on a different element.

as you look beginner I think, it is the easier way I could make for you.

if you need more explanation let me know.

if the link doesn't work,

your HTML corrected:

    <!-- The 1st button -->
    <a id="myBtn1" href="#" class="copy_code" rel="nofollow">open modal 1</a>

    <!-- The 2nd button -->
    <a id="myBtn2" href="#" rel="nofollow">open modal 2</a>

    <!-- The 1st Modal -->
    <div id="myModal1" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <span class="close">&times;</span>
                <h1 class="page-title">modal1</h1>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>


    <!-- The 2nd Modal -->
    <div id="myModal2" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <span class="close">&times;</span>
                <h1 class="page-title">modal2</h1>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>

then your JavaScript corrected:

// Get the modal
var modal1 = document.getElementById('myModal1');
var modal2 = document.getElementById('myModal2');

// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
var btn2 = document.getElementById("myBtn2");

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

// set modal as hidden
modal1.hidden = true;
modal2.hidden = true;

// When the user clicks the button, open the modal 
btn1.onclick = () => {
    return modal1.hidden = false;
}

btn2.onclick = () => {
    return modal2.hidden = false;
}

// When the user clicks on <span> (x), close the modal
span1.onclick = () => {
    return modal1.hidden = true;
}
span2.onclick = () => {
    return modal2.hidden = true;
}

// When the user clicks anywhere outside of the modal, close it //that's the logic
window.onclick = (event) =>{
  if(modal1 || modal2 != false){
    return modal1 && modal2 == true
  }
}

see ya

Farid212
  • 80
  • 9