modal을 이용한 팝업창 자동 닫기도 가능
적당히 css 수정해서 쓰심됩니다. 닫기버튼은 font aswome에 탑제된걸 이용했습니다.
index.php 부분에 적당한 부분에 넣어주세요
[code]
<!-- 모달 부분 -->
<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>
[/code]
CSS부분입니다. default.css 또는 mobile.css에 적당한 부분에 넣으심 됩니다.
[code]
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%;
}
[/code]
댓글 4개
"오늘 하루만 보기" 이런 기능 추가 하고 싶은데요. 도와 주실 수 있으신가요?
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2695 | 1개월 전 | 172 | ||
| 2694 | 1개월 전 | 134 | ||
| 2693 | 1개월 전 | 143 | ||
| 2692 | 1개월 전 | 158 | ||
| 2691 | 1개월 전 | 312 | ||
| 2690 | 1개월 전 | 217 | ||
| 2689 |
|
1개월 전 | 424 | |
| 2688 | 1개월 전 | 275 | ||
| 2687 |
선택과집중
|
1개월 전 | 313 | |
| 2686 | 1개월 전 | 275 | ||
| 2685 | 1개월 전 | 330 | ||
| 2684 | 2개월 전 | 462 | ||
| 2683 | 2개월 전 | 262 | ||
| 2682 | 2개월 전 | 287 | ||
| 2681 |
선택과집중
|
2개월 전 | 264 | |
| 2680 | 2개월 전 | 313 | ||
| 2679 |
|
2개월 전 | 417 | |
| 2678 |
|
2개월 전 | 488 | |
| 2677 | 2개월 전 | 312 | ||
| 2676 | 2개월 전 | 287 | ||
| 2675 |
선택과집중
|
2개월 전 | 464 | |
| 2674 |
|
2개월 전 | 310 | |
| 2673 | 2개월 전 | 322 | ||
| 2672 | 2개월 전 | 272 | ||
| 2671 | 2개월 전 | 244 | ||
| 2670 | 2개월 전 | 357 | ||
| 2669 | 2개월 전 | 275 | ||
| 2668 |
선택과집중
|
2개월 전 | 470 | |
| 2667 |
선택과집중
|
2개월 전 | 455 | |
| 2666 |
선택과집중
|
3개월 전 | 388 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기