트

부트스트랩 Modal Autoload

· 2021-08-02 (월) 11:55:05 · 7249 · 5
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">×</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개

공유해주셔서 감사합니다!!!
감사합니다.
감사합니다.
리액트도 공유 해주시면~~ ㅎㅎㅎㅎ
2021-08-03 (화) 17:31:41
감사합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
21-08-24 조회 7,757
21-08-24 조회 6,981
21-08-23 조회 7,676
21-08-23 조회 6,042
21-08-23 조회 5,835
21-08-21 조회 6,284
21-08-18 조회 6,776
21-08-17 조회 7,228
21-08-17 조회 6,323
21-08-14 조회 7,145
21-08-14 조회 9,722
21-08-11 조회 6,682
21-08-10 조회 8,071
21-08-07 조회 5,747
21-08-05 조회 7,701
21-08-05 조회 7,429
21-08-04 조회 6,267
21-08-04 조회 6,947
21-08-04 조회 6,221
21-08-04 조회 6,108
21-08-02 조회 7,250
21-08-02 조회 6,279
21-08-01 조회 5,796
21-07-31 조회 6,097
21-07-30 조회 5,695
21-07-29 조회 8,212
21-07-28 조회 7,432
21-07-26 조회 7,661
21-07-25 조회 9,710
21-07-24 조회 7,865