묻고답하기
jquery 페이어 팝업 10초 후 자동 닫기
2016.01.10 12:08
안녕하세요. 선배님들.
제가 xpress 게시판에 아래와 같은 스크립트를 사용해 modal layer 팝업을 사용하고 있습니다.
페이지가 로드될 때 자동으로 뜨게 되어 있는데, 여기에 10초 후 자동으로 닫게 하는 방법을 알고 싶습니다.
"setTimeout()"를 활용해서 닫기가 가능한 것 같은데, 제가 코드엔 문외한이라 너무 어렵네요.
선배님들의 고견 부탁 드립니다. 제발요오~
--- 현재 사용하고 있는 코드
<style>
* {
margin:0;
padding:0;
}
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.8;
filter:alpha(opacity=20);
}
#modal {
position:absolute;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:0px;
}
#content {
border-radius:8px;
background:#fff;
padding:10px;
}
#close {
position:absolute;
background:url(../layer/close_.png) 0 0 no-repeat;
width:1px;
height:1px;
display:block;
text-indent:-9999px;
top:-7px;
right:-7px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var modal = (function(){
var
method = {},
$overlay,
$modal,
$content,
$close;
// Center the modal in the viewport
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (settings) {
$content.empty().append(settings.content);
$modal.css({
width: settings.width || 'auto',
height: settings.height || 'auto'
});
method.center();
$(window).bind('resize.modal', method.center);
$modal.show();
$overlay.show();
};
// Close the modal
method.close = function () {
$modal.hide();
$overlay.hide();
$content.empty();
$(window).unbind('resize.modal');
};
// Generate the HTML and add it to the document
$overlay = $('<div id="overlay"></div>');
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#">close</a>');
$modal.hide();
$overlay.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($overlay, $modal);
});
$close.click(function(e){
e.preventDefault();
method.close();
});
return method;
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$.get('../layer/ajax.html', function(data){
modal.open({content: data});
});
});
</script>
- [2016/12/21] 묻고답하기 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 *1
- [2015/12/14] 묻고답하기 스크롤 따라다니는 퀵메뉴 배너 *3
- [2015/11/24] 묻고답하기 메뉴바를 길게하고자 합니다 *1
- [2015/07/16] 묻고답하기 jQuery 질문
- [2015/05/23] 묻고답하기 쌩초보의 허접한 질문... 외부페이지 연결
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
paraduxx | 마이그레이션때 2G 이상 파일 인식 불가 [6] | 2016.01.09 by paraduxx |
flflflfkfl | 관리자 로그인 및 홈페이지 문제 | |
집에가는길 | session 모듈 업데이트 문제 | |
솔파도 | 네이버아이디로 로그인에 대해 설명좀 해주세요! [3] | 2016.01.09 by 솔파도 |
여덟 | 최고의 웹사이트와 홈페이지를 저렵하게 구축해 드립니다. | |
A양 | 레이아웃의 가로 너비? 폭? 을 조정하는 방법. | |
qkrcjfgus33 | 캐시 자동정리코딩을 해봤는데 의견 나눠요(?) | |
송선생님 | 스케치북 모바일 글쓰기시 <p></p> 가 붙습니다. | |
화려한마법사 |
비밀번호 변경 팝업창에 스킵 버튼 넣는 방법
![]() | |
maroni | 1.8.15업데이트 이후 썸네일 복구가 안됩니다 [7] | 2016.01.08 by maroni |
마키1 |
수정비용지불드릴께요 제발 도와주세요 페이지들 센터 맞추기
[9]
![]() | 2016.01.08 by 마키1 |
야울쫑 |
엔진업데이트?
![]() | |
thdwjdtjr | 배경음악이 끊어지지않고 게시판을 옮겨도 이어서 나오게 [2] | 2016.01.08 by 퍼니엑스이 |
luvXE | 새 회원가입시 관리자 이메일로 통보 받는 방법 [2] | 2016.01.08 by 은혜물가 |
khsskyblue | 회원가입시 관리자메일로 통보하는 기능 좀 알려주세요? [2] | 2016.01.08 by 은혜물가 |
곽도영 |
관리페이지 오류
[3]
![]() | 2016.01.07 by HowtoXE |
스파모 | 홈페이지 메인을 바꾸고 싶은데 궁금한점이 있습니다 [2] | 2016.01.07 by HowtoXE |
응ㅇ어ㅏ너 | XE 1.7버전 php 7.0 호환여부 [2] | 2016.01.07 by Luatic™ |
잠자 | 제로보드4 스킨 자료실 [1] | 2016.01.07 by pmacsoft |
핫산123 |
스케치북 게시판 웹진형에서 views vote 이걸 한글로 어떻게 바꾸나요 ?
[1]
![]() | 2016.01.07 by pmacsoft |
해결!
샐프 해결이나 다른 분들께서 참고하십사.
--
$.get('../layer/ajax.html', function(data){
modal.open({content: data});
setTimeout(modal.close,10000);
});
});