2026, 새로운 도약을 시작합니다.

부트스트랩 Modal Autoload

dsaa.jpg

사용방법
부트스트랩 모달팝업에  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">&times;</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]

첨부파일

dsaa.jpg (12.3 KB)
2회 2021-08-02 15:49
Modal_Autoload.html (3 KB) 30회 2021-08-02 15:49
|

댓글 5개

공유해주셔서 감사합니다!!!
리액트도 공유 해주시면~~ ㅎㅎㅎㅎ
감사합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,598
2741 4일 전 조회 125
2740 5일 전 조회 112
2739 1주 전 조회 212
2738 1주 전 조회 221
2737 1주 전 조회 184
2736 2주 전 조회 283
2735 3주 전 조회 288
2734 3주 전 조회 264
2733 1개월 전 조회 267
2732 1개월 전 조회 302
2731 1개월 전 조회 270
2730 1개월 전 조회 227
2729 1개월 전 조회 359
2728 1개월 전 조회 246
2727 1개월 전 조회 422
2726 1개월 전 조회 259
2725 1개월 전 조회 332
2724 1개월 전 조회 363
2723 1개월 전 조회 267
2722 1개월 전 조회 300
2721 1개월 전 조회 214
2720 2개월 전 조회 304
2719 2개월 전 조회 308
2718 2개월 전 조회 202
2717 2개월 전 조회 337
2716 2개월 전 조회 203
2715 2개월 전 조회 313
2714 2개월 전 조회 273
2713 2개월 전 조회 377
2712 2개월 전 조회 290
🐛 버그신고