2017-11-21 17 views
0

bootstrap4에서 모달 팝업을 만들려고합니다. 지침을 따라 열어 본 다음 y 초 후에 팝업 숨기기 jquery 숨기기를 추가하려고했지만 작동하지 않았습니다. . 나는이 라인에서 실수 때문일 수 있습니다 실수 곳 버튼 트리거jquery 부트 스트랩 표시 및 숨기기

<button type="button" class="btn btn-primary" data-toggle="modal" id="myBtn">Pop-up manual trigger </button> 

팝업

 <div class="modal fade" id="exModal1button" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">×</span> 
     </button> 
     </div> 
     <div class="modal-body" id="anim"> 
      <p>Your text ...bla bla... and so on!</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

및 JQuery와

$(document).ready(function(){ 
$("#myBtn").click(function(){ 
    $("#exModal1button").modal("show"); 
}); 
    $("exModal1button").hide(5000);}); 
+0

'그런 다음 y 초 후에 팝업을 닫으려면 hide jquery를 추가하려고했습니다. '어디에서? 내가보기 엔 5 초의 지속 시간으로 페이지로드시 버튼을 숨기는 것입니다. (참고 http://api.jquery.com/hide/#hide-duration-complete) – Taplar

+0

예, 코드에는 모달이 아니라 버튼이 숨겨져 있습니다. –

+0

아마도 부트 스트랩 이후에 jquery를 가져 오거나 필요한 모든 파일을 가져 오지 않았을 것입니다. Bootstrap4를 사용하려면 제대로 작동하는 데 필요한 파일이 필요합니다. –

답변

0

했다.

$("exModal1button").hide(5000);}); 

여분의 중괄호입니다.

그리고 이렇게 할 수 있습니다.

$('#exModal1Button').on('shown.bs.modal', function(){ 
    setTimeout(function(){$('#exModal1Button').hide();},5000); 
    // OR 
    setTimeout(function(){$('#exModal1Button').modal('hide');},5000); 
}) 
+0

Thx. 나는 양쪽 결과를 전혀 시도하지 않았다. 버튼을 클릭하면 팝업이 열리지 만 시간이 지나면 닫히지 않습니다. -5000 ms- – mrs68tm

+0

죄송합니다. mrs68tm 내 솔루션에 실수가있었습니다. 내가 대답을 – Shaybi

+0

안녕하세요, 몇 가지 재판 및 코드 조각을 통해 오류 후, 나는 그것을 작동하게하는 방법을 발견, 나는 다음의 모달의 div에 추가 : data-backdrop = "true" – mrs68tm