사용방법
부트스트랩 모달팝업에 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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 24318 | |
| 24317 | |
| 24315 | |
| 24309 | |
| 24294 | |
| 24293 | |
| 24277 | |
| 24262 | |
| 24260 | |
| 24253 | |
| 24251 | |
| 24236 | |
| 24233 | |
| 24228 | |
| 24226 | |
| 24221 | |
| 24214 | |
| 24203 | |
| 24201 | |
| 24199 | |
| 24196 | |
| 24195 | |
| 24194 | |
| 24192 | |
| 24191 | |
| 24187 | |
| 24185 | |
| 24183 | |
| 24172 | |
| 24168 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기