modal을 이용한 팝업창 자동 닫기도 가능 정보
modal을 이용한 팝업창 자동 닫기도 가능본문
적당히 css 수정해서 쓰심됩니다. 닫기버튼은 font aswome에 탑제된걸 이용했습니다.
index.php 부분에 적당한 부분에 넣어주세요
<!-- 모달 부분 -->
<div id="myModal" class="modal">
<!-- 모달 닫기버튼 -->
<div class="modal-content">
<span class="pop_bt" style="font-size: 25px; float:right;" onClick="close_pop();">
<i class="fa fa-window-close" aria-hidden="true"></i>
</span>
모달 내용부분
</div>
</div>
<!-- 모달 자바스크립트 -->
<script type="text/javascript">
//모달을 페이지 로딩시 자동으로 띄워줌
jQuery(document).ready(function() {
$('#myModal').show();
});
//닫기버튼을 누르면 모달을 숨김
function close_pop(flag) {
$('#myModal').hide();
};
//모달을 시간이 지나면 자동으로 숨김 1000초가 1초
setTimeout(function() { $('#myModal').hide();}, 6000);
</script>
CSS부분입니다. default.css 또는 mobile.css에 적당한 부분에 넣으심 됩니다.
CSS부분입니다. default.css 또는 mobile.css에 적당한 부분에 넣으심 됩니다.
/* 모달 */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 8% auto;
padding: 20px;
border: 1px solid #888;
width: 30%;
}
추천
2
2
댓글 4개
감사합니다.
감사합니다.
소스 공개 감사합니다.
"오늘 하루만 보기" 이런 기능 추가 하고 싶은데요. 도와 주실 수 있으신가요?
"오늘 하루만 보기" 이런 기능 추가 하고 싶은데요. 도와 주실 수 있으신가요?
감사합니다!