Question

我有以下代码，我试图在每个单独的链接中打开2个不同的模式。

模态链接1 - ＆gt;打开modal1 模态链接2 - ＆gt;打开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>

Answer 1

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

我更正了您的代码，我将让您使用最后一个函数cos，您需要确定确切的位置，才能确定必须单击（哪个元素）以关闭模态。

此外，一个ID必须唯一，您可以在另一个元素上使用相同的ID。

我认为您是初学者，这是我可以为您制作的更简单的方法。

如果您需要更多说明，请告诉我。

如果链接无效，

您的HTML已更正：

    <!-- 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>

然后纠正您的JavaScript：

// 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
  }
}

再见

如何用2个不同的按钮打开2个不同的模态

1 个答案: