2017-04-03 6 views
0

나는 공개 모달 계시를 사용하려고합니다.시간 초과 모달 공개

나는 이미 기본 모달만을 사용하여 성공했습니다. 프로젝트 (심포니 2와 기초를 사용하는 프로젝트)를 시작한 이래로, 나는 어려움을 겪고 있습니다. 기초 작업이 실제로 어떻게 이루어지는 지 이해하지 못합니다.

그래서 내가해야 할 일 :

는 주변의 회색 배경없이 페이드 아웃 애니메이션 (현재 10) 몇 초 후에 공개 모달 오픈합니다. 그건 그렇고, 페이드 인 아웃 기능은 모달의 첫 등장 이후에만 발생합니다, 왜 그렇게 이해가 안되니?

나는 이것을하는 방법을 찾으려고 노력했지만 이것에 대한 주제는 발견되지 않았다.

모든 답변 주셔서 감사합니다. : D

추신 : 내 언어가 아니라 문법 오류 때문에 유감스럽게 생각합니다.

어떤 정밀도라도 물어보십시오!

<p><a href="#" data-reveal-id="myModal">Click Me For A Modal</a></p> 
<div id="myModal" data-overlay="false" class="reveal-modal" 
    data-animate="fade-in fade-out" data-reveal aria-labelledby="modalTitle" 
    aria-hidden="true" role="dialog"> 
    <h2 id="modalTitle">Awesome. I have it.</h2> 
    <p class="lead">Your couch. It is mine.</p> 
    <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p> 
    <a class="close-reveal-modal" aria-label="Close">&#215;</a> 
</div> 

답변

0

먼저, (hat tip to this Foundation forum post and codepen code를) 재단 콜백을 사용하여 페이지로드에 모달 화재 :

$(document).ready(function(){ 
setTimeout(
    function() 
    { 
    //do something special 
$('#myModal').foundation('reveal', 'open') 
    }, 10000); 
}); 

는 그런 다음 표시해야합니다 여기 내가 사용하고 모달의 복사본입니다 없음 다음과 같이 배경 오버레이를 알려주십시오.

.reveal-modal-bg { display: none; } 
+0

감사합니다. 링크 및 답변을 제공해 주셔서 감사합니다. 그러나 지연 시간 (10 초)에 대해 알고 싶습니다. – AHAV

+0

setTimeout 함수를 추가하여 페이지가로드 된 후 10 초 지연되고 모달이 실행됩니다. –

+0

CSS 및 JS 로딩 순서에 따라 document.ready가 필요하지 않을 수도 있습니다. –