부트스트랩 Modal Autoload
사용방법
부트스트랩 모달팝업에 data-autoload="true" data-autoload-delay="2000" 추가
data-autoload : 사용여부
data-autoload-delay : 모달팝업 지연
[첨부파일 참조]
HTML
[code]
<div id="Modal_Autoload" class="modal fade" data-autoload="true" data-autoload-delay="2000">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal Autoload</h4>
</div>
<div class="modal-body">
<p>Modal Content</p>
</div>
<div class="modal-footer">
<div class="checkbox pull-left">
<label>
<input class="loadModalHide" type="checkbox" value=""> 팝업을 다시 표시하지 않음.
</label>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
[/code]
JS
[code]
jQuery(window).ready(function () {
/** Modal Autoload
**************************************************************** **/
if(jQuery("div.modal").length > 0) {
jQuery("div.modal").each(function() {
var _t = jQuery(this),
_id = _t.attr('id'),
_autostart = _t.attr('data-autoload') || false;
// reset allow
// localStorage.removeItem(_id);
if(_id != '') { // rewrite if set to hidden by the user
if(localStorage.getItem(_id) == 'hidden') {
_autostart = 'false';
}
}
if(_autostart == 'true') {
jQuery(window).on("load", function() { // required on load!
var _delay = _t.attr('data-autoload-delay') || 1000; // delay when modal apprear
setTimeout(
function() {
_t.modal('toggle');
}, parseInt(_delay));
});
}
// LOCAL STORAGE - DO NOT HIDE ON NEXT PAGE LOAD!
jQuery("input.loadModalHide", this).bind("click", function() {
var _tt = jQuery(this);
if(_tt.is(":checked")) {
localStorage.setItem(_id, 'hidden');
console.log('[Modal Autoload #'+_id+'] Added to localStorage');
} else {
localStorage.removeItem(_id);
console.log('[Modal Autoload #'+_id+'] Removed from localStorage');
}
});
});
}
});
[/code]
댓글 5개
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2665 |
선택과집중
|
3개월 전 | 559 | |
| 2664 |
|
3개월 전 | 608 | |
| 2663 |
|
3개월 전 | 564 | |
| 2662 |
선택과집중
|
3개월 전 | 495 | |
| 2661 | 3개월 전 | 579 | ||
| 2660 |
Modify
|
3개월 전 | 644 | |
| 2659 |
선택과집중
|
3개월 전 | 404 | |
| 2658 | 3개월 전 | 443 | ||
| 2657 |
|
4개월 전 | 955 | |
| 2656 |
선택과집중
|
4개월 전 | 537 | |
| 2655 | 4개월 전 | 394 | ||
| 2654 |
선택과집중
|
4개월 전 | 575 | |
| 2653 | 4개월 전 | 387 | ||
| 2652 | 4개월 전 | 437 | ||
| 2651 |
선택과집중
|
4개월 전 | 316 | |
| 2650 |
선택과집중
|
4개월 전 | 414 | |
| 2649 | 4개월 전 | 434 | ||
| 2648 |
welcome
|
4개월 전 | 537 | |
| 2647 |
디지털홍익인간
|
4개월 전 | 446 | |
| 2646 | 4개월 전 | 456 | ||
| 2645 |
선택과집중
|
4개월 전 | 501 | |
| 2644 | 4개월 전 | 447 | ||
| 2643 | 4개월 전 | 364 | ||
| 2642 | 4개월 전 | 348 | ||
| 2641 | 4개월 전 | 385 | ||
| 2640 | 4개월 전 | 1349 | ||
| 2639 |
|
4개월 전 | 499 | |
| 2638 |
세르반데스
|
5개월 전 | 390 | |
| 2637 |
선택과집중
|
5개월 전 | 557 | |
| 2636 |
선택과집중
|
5개월 전 | 672 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기