0
는 참조 용으로이 링크를 참조하시기 바랍니다 : 당신이 페이지에서 아래로 스크롤하여 프로필 상자 중 하나를 위로 마우스를 이동하면 다음을 클릭합니다 http://acue.siteassembly.com/cmf2/한 페이지에 여러 조동사를 종료하는 방법
을 "읽기 자세히보기"당신은 모달 팝업을 볼 수 . 내가 겪고있는 문제는 각각의 모달을 닫는 한 페이지에서 여러 모달을 활성화하는 데 있습니다.
다음은 WordPress 템플릿에서 내 보낸 HTML의 한 예입니다. 각 모달은 아래의 JS에서 설명한대로 순차적으로 고유 한 html을가집니다.
<!-- 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";
}
}
외부에서 방문자가 클릭하면 모달을 닫으려고하는 기능처럼 보입니다. 실제로 방문자가 모달을 클릭하면 숨길 수 있습니다. 클릭 이벤트 대상이 모달과 동일한 경우 아무 것도 표시하지 않도록 모달을 설정합니다. 따라서 전체 섹션을 변경해야합니다. 이벤트 대상이 모달 중 하나와 같지 않으면 모달 모두를 표시하지 않도록 설정합니다. – WebElaine
불행히도, 그 문제를 해결하지 못했습니다. 그래도 의견에 감사드립니다. –