사용방법
부트스트랩 모달팝업에 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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 23798 | |
| 23797 | |
| 23792 | |
| 23791 | |
| 23785 | |
| 23781 | |
| 23770 | |
| 23766 | |
| 23764 | |
| 23761 | |
| 23747 | |
| 23732 | |
| 23724 | |
| 23718 | |
| 23706 | |
| 23700 | |
| 23697 | |
| 23686 | |
| 23682 | |
| 23681 | |
| 23680 | |
| 23678 | |
| 23665 | |
| 23644 | |
| 23643 | |
| 23639 | |
| 23637 | |
| 23630 | |
| 23626 | |
| 23616 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기