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

我有下面的代码，我试图在每个单独的链接中打开两个不同的模态

模态链接1->打开模态1 模态链接2->打开模态2

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

请参见上的Sotiris Panagopoulos（）的画笔

我纠正你的代码，我会让你玩最后一个函数，因为你必须确定我们必须点击（哪个元素）关闭你的模态

---

另外，一个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>

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

&时代；
模态1
&时代；
模态2

然后更正您的JavaScript：

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

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

//获取模式
var modal1=document.getElementById（'myModal1'）；
var modal2=document.getElementById（'myModal2'）；
//获取打开模式对话框的按钮
var btn1=document.getElementById（“myBtn1”）；
var btn2=document.getElementById（“myBtn2”）；
//获取关闭模态的元素
var span1=document.getElementsByClassName（“关闭”）[0]；
var span2=document.getElementsByClassName（“关闭”）[1]；
//将模态设置为隐藏
modal1.hidden=true；
modal2.hidden=true；
//当用户单击该按钮时，打开模式对话框
btn1.onclick=（）=>{
return modal1.hidden=false；
}
btn2.onclick=（）=>{
return modal2.hidden=false；
}
//当用户单击（x）时，关闭模式对话框
span1.onclick=（）=>{
return modal1.hidden=true；
}
span2.onclick=（）=>{
return modal2.hidden=true；
}
//当用户单击模式之外的任何位置时，将其关闭//这就是逻辑
window.onclick=（事件）=>{
if（modal1 | | modal2！=false）{
返回modal1&&modal2==true
}
}

---

请参见ya

可能的重复：可能的重复没有bootstrapalso，一个ID必须是唯一的您不能在不同的元素上具有相同的ID。