부트 스트랩 모달 이벤트 제어

부트 스트랩 모달을 사용하여 두 개의 '페이지'가있는 양식을 만들려고합니다. 사용자가 '다음'을 클릭하면 모달을 숨기고 새 콘텐츠를로드하고 다시 표시합니다. 하지만 모달을 .modal ("hide")으로 닫으면 모달을 닫지 않고 다른 모달을 보여 주며 화면을 더 어둡게 만듭니다.
또한 부트 스트랩이 제공하는 닫기 버튼을 클릭하면 두 개의 모달이 표시되고 두 번째는 나중에 숨기고 두 번째로 모달을 열려면 클릭하십시오. 3 개의 모달이 있습니다! 모달의 버튼을 클릭 할 때마다 페이지에 다른 모달이 추가됩니다. 나는 무엇을 할 수 있습니까 ?? 여기에 몇 가지 코드가 있지만이 문제를 일으키는 가장 간단한 기능입니다.부트 스트랩 모달 이벤트 제어

function additionFormValidate() { 
    if ($('#form-modal').is(':visible')) { 
     secondPage(); 
    } else { 
     console.log("modal didnt open"); 
    } 
} 

function secondPage() { 
    $("#form-modal").modal("hide"); 
}

HTML

<div class="modal fade" id="form-modal" onclick="openModal()" tabindex="-1" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"></div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> 
      <button type="button" class="btn btn-primary" onclick="additionFormValidate()">Next</button> 
     </div> 
    </div> 
</div>

수행이 잘 알고 누구?

출처

2017-11-27 sapIL IL

당신도 당신의 HTML을 제공 할 수 있습니까? – Nattrass

openModal()에 JS를 제공 할 수 있습니까? – Nattrass

가끔은 setTimeout() 자바 스크립트가 너무 빨리 작동하지 않도록해야합니다.

데모 : http://jsbin.com/remevolemi/3/edit?html,output 여기

$('.btn1').click(function(){ 
     $('#modal1').find('.modal-body').text('first content'); 
     $('#modal1').modal('show'); 
    }); 

    $('.btn-next').click(function(){ 
     $("#modal1").modal('hide'); //hide modal 
     setTimeout(function(){ 
     $("#modal1").find('.modal-body').text('second content'); //change modal content 
     $('#modal1').modal('show');//show modal again 
     }, 500); //wait 0.5 sec 

    });

다른 경우에 대한 몇 가지 예 : http://jsbin.com/edit?html,output

출처

2017-11-27 08:30:15 plonknimbuzz

시간 초과가 아닌 hidden.bs.modal 이벤트를 사용하는 것이 좋습니다. – Nattrass

문제가 해결되었습니다! , html은 내용 로딩 때문에 나뉘어져서 함수 호출이 실수로 두 번 작성되어 모달을 너무 많이 나타납니다. 어쨌든 고맙습니다. –

@Nattrass nice. 나는 이것을 잘 알고있다. 넌 멋진 남자 야 ... 고마워. – plonknimbuzz

부트 스트랩 모달 이벤트 제어

답변

관련 문제