javascript - 模态窗口要么显示相同的内容，要么根本不显示

Question

我已经经历了一百万个这样的问题，但我的不会工作。这个特定的模态窗口设置来自 W3。在此示例中，Scott 的模式窗口弹出并显示正确的信息。佐伊没有。

根据我看到的其他帖子，我的策略是确保我没有任何重叠的 ID。我在 HTML 和 JavaScript 中的所有 Zoey 的 ID 标记中添加了 1（除非我在某处遗漏了什么），当我点击它时，什么也没有发生。

我看到了使用 onclick 功能或其他一些脚本插件的建议。我需要这样做吗？

<div class="col-4 col-6-medium col-12-small">
    <section>
        <a href="#" class="image featured"><img src="images/profiles/scottProfile-02.png" alt=""/></a>
        <header>
            <h3>Scott Miller</h3>
            <h4>Founder and CEO</h4>
        </header>
        <p>&ensp; Scott is a versitile and innovative professional with extensive leadership experience across multiple business environments. Scott is a National Administrator Board Certified (NAB) Healthcare Services Administrator. He holds multiple certifications including LNHA, CCRC, CALA, and is a certified
            and licensed Dementia Practitioner.</p>
        <button id="myBtn">Read More</button>
    </section>

</div>
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
            <header>
                <h3>Scott Miller</h3>
                <h4>Founder and CEO</h4>
            </header>
        <p>Scott is a versitile and innovative professional with extensive leadership experience across multiple business environments. He is an analytical strategist skilled in sucessfully implementing Human Resources processes that enhance organizational initiatives and deliver significant returns. He is also a collaborative communicator focused on building productive relationships
            and promoting new systems that boost performance. Scott is adept at managing all aspects of business operations with extensive experience in the Healthcare Administration Sector. He is skilled at developing creative sales and marketing programs that generate increased revenue and market positioning. He has a proven record of leading
            projects from inception to completion.
            <br>
            &ensp;Scott is a National Administrator Board Certified (NAB) Healthcare Services Administrator. He holds multiple certifications including LNHA, CCRC, CALA, and is a certified
            and licensed Dementia Practitioner. In 2017, Scott established a Parkinson's Center for Excellence in North Andover, MA. He has dedicated his entire career to human service, patient advocacy, and strices to find unique solutions for individuals to overcome developmental obstacles across the life spectrum.
        </p>
        <table style = "font-size: 10px;">
            <tr style = "text-align: left;">
            <!-- education --><th>Academic Qualifications</th>
            <!-- pro training --><th>Professional Training</th>
            <!-- pro licenses --><th>Professional Licenses</th>
            </tr>
            <tr style = "text-align: left;">
            <!-- education --><td><div class = "bold">Bachelor of Science - Business Administration (Managerial Economics)</div>- East Carolina University</td>
            <!-- pro training--><th><div class = "bold">Zig Ziegler Selling and the Sales Process</div></th>
            <!-- pro licenses--><th><div class = "bold">VBHP</div>- Licensed ALF Administrator (ALFA)</th>  
            </tr>
            <tr style = "text-align: left;">
            <!-- pro training--><th><div class = "bold">Phillip Crosby Quality Management College</div> - The Quality Process</th>
            <!-- pro licenses--><th><div class = "bold">NAB</div>- Long Term Care Administrators License (LALA)</th>
            </tr>
            <tr style = "text-align: left;">
                <!-- pro training--><th><div class = "bold">Dale Carnegie</div> - Public Speaking</th>
                <!-- pro licenses--><th><div class = "bold">NCCDP</div>- Certified Dimentia Practitioner</th>
            </tr>
        </table>
    </div>
</div>

<!-- Zoey -->
<div class="col-4 col-6-medium col-12-small">
    <section>
        <a href="#" class="image featured"><img src="images/profiles/zoeyProfile-03.png" alt=""/></a>
        <header>
            <h3>Zoey Charif</h3>
            <h4>Business Strategist and Grant Specialist</h4>
        </header>
        <p>&ensp; Zoey Charif is a dedicated, passionate and intelligent individual. She has a holistic approach to business that has ensured a medium of communication, promoting knowledge, growth, and learning.</p>
        <button id="myBtn1">Read More</button>
    </section>
</div>
<div id="myModal1" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <class="image featured"><img src="images/profiles/zoeyProfile-03.png" alt=""/></a>
                <header>
                    <h3>Zoey Charif</h3>
                    <h4>Business Strategist and Grant Specialist</h4>
                </header>
        <p>She is a leader and a team player, portraying her vision and ensuring its fulfillment. She believes in the team and not individuality. Her principles of trust, loyalty and faith will become an emblem and example for the entire organixation. Her
            visionary knowledge, diverse experience, humble approach, and intuitive business mindset make her a great person to work alongside.
        </p>
        <table style = "font-size: 10px;">
            <tr style = "text-align: left;">
            <!-- education --><th>Academic Qualifications</th>
            </tr>
            <tr style = "text-align: left;">
            <!-- education --><td><div class = "bold">Bachelor's Degree in Criminology</div>- Simon Fraser University</td>
            </tr>
            <tr style = "text-align: left;">
            <!-- education --><td><div class = "bold">Certificate in Data Analytics</div>- University of California</td>
            </tr>
        </table>
    </div>
</div>

^ HTML

<script>

    // 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 = modal.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";
      }
    }
</script>
<script>
    // Get the modal
    var modal1 = document.getElementById("myModal1");
    
    // Get the button that opens the modal
    var btn1 = document.getElementById("myBtn1");
    
    // Get the <span> element that closes the modal
    var span = modal.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";
      }
    }
</script>

标签： javascriptonclickmodal-dialogbootstrap-modalsimplemodal