한 페이지에 여러 개의 모달 상자 열기

한 페이지에 여러 개의 모달 상자 열기

페이지상의 대응하는 링크를 클릭했을 때에, 다른 모달 박스를 열 필요가 있는 페이지가 있습니다.ONE window에서 동작하는 구조와 javascript가 있습니다만, 1개 이상 동작하지 않습니다.각 모달 박스를 루프로 통과해야 할 것 같아요구문은 잘 모르겠어요

이것은 클라이언트의 WordPress 사이트용이며, 고급 사용자 지정 필드를 사용하여 내용을 채우고 있습니다.이 페이지는 아직 공개되지 않았기 때문에 제 코드를 보여주는 코드펜이 여기 있습니다.http://codepen.io/FelixB/pen/EPvEVG

코드:

var modal = document.getElementsByClassName('modal-window');

var btn = document.getElementsByClassName("click-to-open");

var span = document.getElementsByClassName("close")[0];

for (var i = 0; i < btn.length; i++) {
  var thisBtn = btn[i]
  thisBtn.onclick = function() {
    alert("hello");

    //modal.style.display = "block";
  }
}

span.onclick = function() { 
  modal.style.display = "none";
}

window.onclick = function(event) {

}

나중에 선택할 수 있으려면 원하는 모달로 만들어야 합니다.이를 위한 한 가지 방법은id.

<div id="modal-window-one" class="modal-window modal"></div>
<div id="modal-window-two" class="modal-window modal"></div>

어떤 버튼을 열어야 하는지 정의해야 합니다.이를 위한 하나의 가능한 해결책은data-attributes

<div class="click-to-open" data-modal="modal-window-one"> //will open modal one
<div class="click-to-open" data-modal="modal-window-two"> //will open modal two

그 다음 - 이벤트:

var btn = document.getElementsByClassName("click-to-open");

for (var i = 0; i < btn.length; i++) {
  var thisBtn = btn[i];
  thisBtn.addEventListener("click", function(){
    var modal = document.getElementById(this.dataset.modal);
    modal.style.display = "block";
}, false);

다시 말씀드리지만, 이것은 가능한 해결책 중 하나입니다.

다음 예시는 부트스트랩을 사용하여 여러 개의 팝업을 표시하는 예입니다.또, 예를 나타내는 jsfiddle도 첨부되어 있습니다.클래스 이름을 모달 대화 상자에 설정합니다.

<div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>  </div></div>

모달 대화 상자를 인스턴스화합니다.

$('.myModal').modal();

다음은 실행 중인 jsfiddle https://jsfiddle.net/niteshp27/msdg98vn/ 입니다.

모든 모달의 클래스는 다음과 같이 유지됩니다.class="modal"단, 같은 화면에 표시할 수 있는 모달 수가 많을 경우"id"Bootstrap Modals는 Javascript로 작성되고 JS는 완전히 id에 기반하기 때문에 속성입니다.

<div id="modal-one" class="modal fade"></div>
<div id="modal-two" class="modal fade"></div>

어떤 버튼이 어떤 모달의 타깃이 되는지 정의해야 합니다.data-target태그 속성입니다.< a > 태그를 사용하여 모드를 트리거하는 경우href기여하다.예:

<button data-toggle="modal" data-target="#modal-one"> First Modal </button>          
<button data-toggle="modal" data-target="#modal-two"> Second Modal </button>

또는 < a > 태그를 사용하고 있는 경우는,

<a data-toggle="modal" href="#modal-one"> First Modal </a>
<a data-toggle="modal" href="#modal-one"> First Modal </a>

자세한 내용은 다음 페이지에서 Bootstrap Modals 페이지를 참조하십시오.

주의: Bootstrap 공식 문서 부트스트랩은 한 번에 하나의 모드 창만 지원합니다.중첩된 모달은 사용자 환경이 좋지 않다고 생각되므로 지원되지 않습니다.

언급URL : https://stackoverflow.com/questions/34779157/opening-multiple-modal-boxes-on-one-page