라이브러리 커스터마이징 - leanModal.js

아래 글들은 검색엔진 노출을 위한 글입니다. 

노션에서 확인하시면 이미지와 함께 정리된 글을 보실수 있습니다. 궁금하신점은 블로그 댓글이나 노션 코멘트를 이용해주세요(@comment)

https://www.notion.so/simsimjae/leanModal-js-00d4f66594544fce8da0cea64813eeb3

---

제가 직접 만든 프로젝트입니다.

http://pickvs.com : 닥전닥후

---

 

 

### 탑 다운 방식으로 큰 그림 부터 보고 세세한 부분까지 분석을 하겠음.

    (function ($) {
     $.fn.extend({
     leanModal: function (options) {
     //..code..
     }
     });
    })(jQuery);

- 즉시실행함수 패턴을 사용해서 라이브러리의 코드와 외부가 충돌하지 않게 네임스페이스를 구분해줌.
- 제이쿼리 프로토타입 객체인 `$.fn`에 `leanModal` 메소드를 추가 시키는 방법을 사용함

### `leanModal` 메소드 내부

    leanModal : function (options) {
     var defaults = {
            top: 100,
            overlay: 0.5,
            closeButton: ".modal_close",
            escapeClose: true,
            clickClose: true
          }; 
     /*
     투명도, 탑 포지션, 닫기버턴의 클래스명 및 기타 옵션
     */
    
        options = $.extend(defaults, options); //사용자가 넘긴 옵션이 있으면 기본옵션을 덮어씌움
        var overlay = $('

 

'); //오버레이
     $('body').append(overlay); //깔아줌.
    
     function close_modal(modal_id) {
            $('#lean-overlay').fadeOut(0);
            $(modal_id).css({
              'display': 'none'
            });
            $(document).off('keydown.leanModal');
            $.scrollLock(false);
            $('.home_header_navlist').show();
            typeof resetBottomNavbar != 'undefined' && resetBottomNavbar();
            $('.bottom_navbar').removeClass('on')
          }
    
     return this.each(function (){
     //...code...
     });
    }

- 주황색 부분을 제외한 윗부분은 자유변수들에 해당한다. 클로저를 활용해서 모듈화 되어있다.

[close_modal 분석](https://www.notion.so/6942402d7a744ff7b2df2b33ab7ee984)

### `return문` 이하 분석

[return문 이하 분석 - 풀 페이지 권장](https://www.notion.so/c43adcabb20d48768cb6b39e9b133831)

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

 

function close_modal(modal_id) {
  $('#lean-overlay').fadeOut(0); // 오버레이 사라짐
  $(modal_id).css({ 
    'display': 'none'
  }); //모달 안보이게
  $(document).off('keydown.leanModal'); //이벤트 off
  $.scrollLock(false); //직접 만들어준 함수, 바닥이 스크롤되지 않게 막아줌.
}

 

[](https://www.notion.so/c43adcabb20d48768cb6b39e9b133831#944fa96d0a8d4f5089f9861016a8aa6d)

    $('a[rel*=leanModal]').leanModal(
     { overlay: 0.4, slideinUp: '_system_modal' });

- 위와 같이 data-rel 태그에 `leanModal`이 있는 엘리먼트에 대해서 `$.fn`에 있는 leanModal 메서드를 실행시킨다.
- options → leanModal 메소드로 넘겨진 매개변수
- this → 메소드 내에서의 this는 그 메소드를 호출한 객체를 가리킨다. 즉 아래 leanModal들을 선택한 제이쿼리 객체가 this가 된다.

    $('a[rel*=leanModal]') === this

- 즉 셀렉터에 의해서 선택된 엘리먼트들을 each로 돌면서 콜백을 호출한다.

### `콜백 내부` - var o = options; 이하

- 각 엘리먼트에 클릭 이벤트 핸들러를 정의하고 있다.

[클릭 이벤트 핸들러 내부](https://www.notion.so/d10e1d84787d4a9685779cd22bbee580)