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

Question

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

如果您向下滚动页面并将鼠标悬停在任何配置文件框上，请点击＆＃34;阅读更多＆＃34;你会看到一个模态弹出窗口。我遇到的麻烦是在一个页面上启用多个模态，分别关闭每个模态等。

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

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