javascript - 如何在一个页面上关闭多个模态框

Question

请参阅此链接以供引用:http://acue.siteassembly.com/cmf2/

如果您在页面上向下滚动并将鼠标悬停在任何个人资料框上，然后单击“阅读更多”，您将看到一个模式弹出窗口。我遇到的麻烦是在一个页面上启用多个模式，分别关闭每个模式等。

以下是 HTML 的一个示例(从 WordPress 模板导出)。每个模式都有自己的 html，按顺序排列，如下面的 JS 中所述。

<!-- Begin Padron Modal -->

<div id="cmModalContainer">
<div id="cmModal">
<div class="close">×</div>
<p><img src="https://siteassembly.com/wp-content/uploads/2017/09/eduardo-padron-square-headshot.png" alt="Eduardo Padrón Headshot" /></p>
<div class="modal-content-wrap">
<h1 class="faculty-modal-title">Eduardo Padrón</h1>
<ul>
    <li class="title1"><p>President, Miami Dade College</p></li>
    <li class="title2"><p>Member, ACUE Board of Advisors</p></li>
</ul>
<div class="grey-line-divider"></div>
<p class="modal-article article-top">Today, higher education is confronted by enormous challenges. Our enduring charge is student learning—the cultivation of deep understanding and the capacity to apply new knowledge. But our enterprise is more complex than ever. Technology’s constant evolution, increased student diversity, and the transformation of our workforce all demand new responses.
<br /><br />
We have not lacked for effort. We’ve expanded advising and provide supplemental instruction. We monitor predictive analytics, intervene accordingly, and redesign courses to make pathways clear and coherent. We’re focusing on the first-year experience and asking students to collaborate on projects, conduct research, and learn through civic engagement.
<br /><br />
<div class="individual-quote">“If we are to meet the challenges of learning in this time of change, teaching must be central to our success.”</div>
<br /><br />
<p class="modal-article article-bottom">All of this is valuable and relevant but only part of what is required to significantly advance student success. Although the faculty of our colleges and universities possess distinguished content expertise and research acumen, too seldom have they been equipped with equivalent pedagogical skills and expertise. This is particularly relevant for our many non-tenure-track educators whose primary responsibility is to teach. If we are to meet the challenges of learning in this time of change, teaching must be central to our success.
<br /><br />
Toward this end, it is my privilege to work with the Association of College and University Educators (ACUE). ACUE’s Effective Practice Framework provides higher education with a much-needed common statement of the instructional skills and knowledge that every college educator should possess. ACUE’s online Course in Effective Teaching Practices is comprehensive and steeped in pedagogical research. The ACUE Certificate in Effective College Instruction is awarded in collaboration with the American Council on Education (ACE). And its Community of Professional Practice keeps faculty informed about the latest developments in teaching and allows them to collaborate with peers nationwide.
<br /><br />
ACUE’s work represents what few institutions could have built alone: a scalable and affordable program to make great teaching a strategic driver of student success. I serve on ACUE’s board of advisors and am inspired by the change that has been set in motion and believe that great teaching—a long-sought priority of higher education—is within our grasp.
<br /><br />
<strong style="font-size: 28px;">Exceeding Expectations</strong>
<br /><br />    
From the outset, ACUE adopted exacting design standards. Its course would be evidence-based and relevant to faculty regardless of discipline, years of experience, or level of instruction. As a primer in teaching foundations, it would be comprehensive and model, through its learning design, recommended practices. To support large numbers of faculty, it would also need to be scalable. Molly Corbett Broad, president of ACE from 2008 until September. 1, 2017, Linda Nilson, an expert on college instruction, and Catherine Haras, a leader in faculty development, discuss how these standards have been met.</p>
</p>
</div><!-- end modal-content-wrap -->
</div><!-- end cmModal -->
</div><!-- end cmModalContainer -->

<!-- End Padron Modal -->

这是我的 JS

// Get the modal
var modal = document.getElementById('cmModalContainer');
var cmModalTwo = document.getElementById('cmModalContainerTwo');
var cmModalThree = document.getElementById('cmModalContainerThree');
var cmModalFour = document.getElementById('cmModalContainerFour');
var cmModalFive = document.getElementById('cmModalContainerFive');
var cmModalSix = document.getElementById('cmModalContainerSix');
var cmModalSeven = document.getElementById('cmModalContainerSeven');
var cmModalEight = document.getElementById('cmModalContainerEight');
var cmModalNine = document.getElementById('cmModalContainerNine');
var cmModalTen = document.getElementById('cmModalContainerTen');
var cmModalEleven = document.getElementById('cmModalContainerEleven');
var cmModalTwelve = document.getElementById('cmModalContainerTwelve');
var cmModalThirteen = document.getElementById('cmModalContainerThirteen');

// Get the button that opens the modal
var btn = document.getElementById('cmModalBtn');
var btnTwo = document.getElementById('mollyBtn');
var btnThree = document.getElementById('lindaBtn');
var btnFour = document.getElementById('catherineBtn');
var btnFive = document.getElementById('danielBtn');
var btnSix = document.getElementById('aaronBtn');
var btnSeven = document.getElementById('kevinBtn');
var btnEight = document.getElementById('amyBtn');
var btnNine = document.getElementById('maryBtn');
var btnTen = document.getElementById('bonitaBtn');
var btnEleven = document.getElementById('lorettaBtn');
var btnTwelve = document.getElementById('deborahBtn');
var btnThirteen = document.getElementById('joselBtn');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName('close')[0];
var spanTwo = document.getElementsByClassName('closeTwo')[0];
var spanThree = document.getElementsByClassName('closeThree')[0];
var spanFour = document.getElementsByClassName('closeFour')[0];
var spanFive = document.getElementsByClassName('closeFive')[0];
var spanSix = document.getElementsByClassName('closeSix')[0];
var spanSeven = document.getElementsByClassName('closeSeven')[0];
var spanEight = document.getElementsByClassName('closeEight')[0];
var spanNine = document.getElementsByClassName('closeNine')[0];
var spanTen = document.getElementsByClassName('closeTen')[0];
var spanEleven = document.getElementsByClassName('closeEleven')[0];
var spanTwelve = document.getElementsByClassName('closeTwelve')[0];
var spanThirteen = document.getElementsByClassName('closeThirteen')[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}
btnTwo.onclick = function() {
    cmModalTwo.style.display = "block";
}
btnThree.onclick = function() {
    cmModalThree.style.display = "block";
}
btnFour.onclick = function() {
    cmModalFour.style.display = "block";
}
btnFive.onclick = function() {
    cmModalFive.style.display = "block";
}
btnSix.onclick = function() {
    cmModalSix.style.display = "block";
}
btnSeven.onclick = function() {
    cmModalSeven.style.display = "block";
}
btnEight.onclick = function() {
    cmModalEight.style.display = "block";
}
btnNine.onclick = function() {
    cmModalNine.style.display = "block";
}
btnTen.onclick = function() {
    cmModalTen.style.display = "block";
}
btnEleven.onclick = function() {
    cmModalEleven.style.display = "block";
}
btnTwelve.onclick = function() {
    cmModalTwelve.style.display = "block";
}
btnThirteen.onclick = function() {
    cmModalThirteen.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
spanTwo.onclick = function() {
    cmModalTwo.style.display = "none";
}
spanThree.onclick = function() {
    cmModalThree.style.display = "none";
}
spanFour.onclick = function() {
    cmModalFour.style.display = "none";
}
spanFive.onclick = function() {
    cmModalFive.style.display = "none";
}
spanSix.onclick = function() {
    cmModalSix.style.display = "none";
}
spanSeven.onclick = function() {
    cmModalSeven.style.display = "none";
}
spanEight.onclick = function() {
    cmModalEight.style.display = "none";
}
spanNine.onclick = function() {
    cmModalNine.style.display = "none";
}
spanTen.onclick = function() {
    cmModalTen.style.display = "none";
}
spanEleven.onclick = function() {
    cmModalEleven.style.display = "none";
}
spanTwelve.onclick = function() {
    cmModalTwelve.style.display = "none";
}
spanThirteen.onclick = function() {
    cmModalThirteen.style.display = "none";
}

// When the user clicks anywhere outside of a modal, close that modal
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
    if (event.target == cmModalTwo) {
        cmModalTwo.style.display = "none";
    }
    if (event.target == cmModalThree) {
        cmModalThree.style.display = "none";
    }
    if (event.target == cmModalFour) {
        cmModalFour.style.display = "none";
    }
    if (event.target == cmModalFive) {
        cmModalFive.style.display = "none";
    }
    if (event.target == cmModalSix) {
        cmModalSix.style.display = "none";
    }
    if (event.target == cmModalSeven) {
        cmModalSeven.style.display = "none";
    }
    if (event.target == cmModalEight) {
        cmModalEight.style.display = "none";
    }
    if (event.target == cmModalNine) {
        cmModalNine.style.display = "none";
    }
    if (event.target == cmModalTen) {
        cmModalTen.style.display = "none";
    }
    if (event.target == cmModalEleven) {
        cmModalEleven.style.display = "none";
    }
    if (event.target == cmModalTwelve) {
        cmModalTwelve.style.display = "none";
    }
    if (event.target == cmModalThirteen) {
        cmModalThirteen.style.display = "none";
    }
}

Answer 1

解决这个问题的一个简单方法是使用 Bootstrap 的模式。我在这里为你做了一个简单的jsfiddle:https://jsfiddle.net/maxbilbow/0Ld36bxk/7/

我可以在您的网站上看到 jQuery 库已包含在内，因此您只需添加 bootstrap js and css files到该页面:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

这将处理所有样板代码，同时允许您自定义设计。