一个页面上的多个模态弹出框

Question

我一直在与不同按钮的点击在一个页面上进行多个模态的斗争。请帮忙，我是新来的。虽然我有它在测试领域，也许你可能要检查它http://test.crewresolution.com/index.html

感谢

// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the button that opens the modal 
 
var btn = document.getElementById("myBtn"); 
 

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

 
// When the user clicks the button, open the modal 
 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
// When the user clicks anywhere outside of the modal, close it 
 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
     modal.style.display = "none"; 
 
    } 
 
}

/* Modal Content */ 
 
.modal-content { 
 
    position: relative; 
 
    background-color: #fefefe; 
 
    margin: auto; 
 
    padding: 0; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
 
    -webkit-animation-name: animatetop; 
 
    -webkit-animation-duration: 0.4s; 
 
    animation-name: animatetop; 
 
    animation-duration: 0.4s; 
 
    z-index: 10000; 
 
} 
 

 
/* Add Animation */ 
 
@-webkit-keyframes animatetop { 
 
    from {top:-300px; opacity:0} 
 
    to {top:0; opacity:1} 
 
} 
 

 
@keyframes animatetop { 
 
    from {top:-300px; opacity:0} 
 
    to {top:0; opacity:1} 
 
} 
 

 
/* The Close Button */ 
 
.close { 
 
    color: white; 
 
    float: right; 
 
    font-size: 28px; 
 
    font-weight: bold; 
 
} 
 

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

 
.modal-header { 
 
    padding: 2px 16px; 
 
    background-color: #266eb8; 
 
    color: white; 
 
} 
 

 
.modal-body {padding: 2px 16px;} 
 

 
.modal-footer { 
 
    padding: 2px 16px; 
 
    background-color: #266eb8; 
 
    color: white; 
 
}

<div class="row"> 
 
       <div class="col-md-4 wow fadeInUp"> 
 
       <div class="box-service"> 
 
        <div class="ic-service text-center"> 
 
        <i class="ti-cloud-up"></i> 
 
        </div> 
 
        <h4 class="text-uppercase color-dark title-service text-center">Message from Crew Resolution</h4> 
 
        <p>Resolution is a reformed group, which consist of 200 admins as one of the best programmers from: Russia, India, South Africa and USA which form a single team. </p> 
 
            <button id="myBtn">Click to see more >></button> 
 
        <!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <span class="close">&times;</span> 
 
     <h4>Additional Benefits</h4> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <p>1. \t Free ticket worth N600k to South Africa for all active members with 100 direct down lines and have PH minimum amount of N500k or $1500 for 4 months.<br> 
 
2. \t Free N150k will be given to active members who have participated for 6 months after registration, and the money is for:<br> 
 
• \t Skills acquisition program.<br> 
 
• \t Business as an entrepreneur.<br> 
 
• \t School fee regarded as scholarship.<br> 
 
No condition on amount PH in No.2<br> 
 
3. \t An active member within the first 4 months of registration with minimum PH of N500k or $1500 in bit coins in each month is qualified to get a loan of N2M and will be paid back for the next 6 months.<br> 
 
Condition: All of these will be in batches such as: batch A, B, C, D, E, F etc. 
 
</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <h4>Additional Benefits</h4> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
       </div> 
 
       </div> 
 
       <div class="col-md-4 wow fadeInUp" data-wow-delay="0.5s"> 
 
       <div class="box-service"> 
 
        <div class="ic-service text-center"> 
 
        <i class="ti-bar-chart"></i> 
 
        </div> 
 
        <h3 class="text-uppercase color-dark title-service text-center">Summary</h3> 
 
        <p>➢ \t 40% in local currency (Naira) per month.<br> 
 
➢ \t 60% in bit coin per month. <br> 
 
➢ \t 10% constant referral bonus from all direct down lines.<br> 
 
</p> 
 
        <button id="myBtn">Click to see more >></button> 
 
        <!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <span class="close">&times;</span> 
 
     <h4>Summary</h4> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <p>➢ \t 40% in local currency (Naira) per month.<br> 
 
➢ \t 60% in bit coin per month. <br> 
 
➢ \t 10% constant referral bonus from all direct down lines.<br> 
 
➢ \t “Alert FBI Icon” conditions: Raise “Alert FBI” only when there is fake POP. Abuse of this will lead to account blocking permanently.<br> 
 
➢ \t First time registration bonus once:<br> 
 
N10k \t - \t N99k gives bonus of N6k or $20<br> 
 
N100k \t - \t N499k gives bonus of N20k or $50<br> 
 
N500k \t - \t N1M \t gives bonus of N50k or $150<br> 
 
➢ \t Minimum PH of N10k<br> 
 
➢ \t Once PH there is an instant matching to pay 10% of your total amount PH as a commitment.<br> The remaining 90% will be matched at least 20 days later. 
 

 
</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <h4>Summary</h4> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
       </div> 
 
       </div> 
 
       <div class="col-md-4 wow fadeInUp" data-wow-delay="1s"> 
 
       <div class="box-service"> 
 
        <div class="ic-service text-center"> 
 
        <i class="ti-mobile"></i> 
 
        </div> 
 
        <h4 class="text-uppercase color-dark title-service text-center">Additional Benefits</h4> 
 
        <p>1. \t Free ticket worth N600k to South Africa for all active members with 100 direct down lines and have PH minimum amount of N500k or $1500 for 4 months.</p> 
 
        <button id="myBtn">Click to see more >></button> 
 
        <!-- The Modal --> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <span class="close">&times;</span> 
 
     <h4>Additional Benefits</h4> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <p>1. \t Free ticket worth N600k to South Africa for all active members with 100 direct down lines and have PH minimum amount of N500k or $1500 for 4 months.<br> 
 
2. \t Free N150k will be given to active members who have participated for 6 months after registration, and the money is for:<br> 
 
• \t Skills acquisition program.<br> 
 
• \t Business as an entrepreneur.<br> 
 
• \t School fee regarded as scholarship.<br> 
 
No condition on amount PH in No.2<br> 
 
3. \t An active member within the first 4 months of registration with minimum PH of N500k or $1500 in bit coins in each month is qualified to get a loan of N2M and will be paid back for the next 6 months.<br> 
 
Condition: All of these will be in batches such as: batch A, B, C, D, E, F etc. 
 
</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <h4>Additional Benefits</h4> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
       </div> 
 
       </div> 
 
      </div>

Answer 1

你需要给不同的ID以你的情态动词，一个ID必须是唯一和仅1元素。 您可以使用myModal1，myModal2，myModalx。