제이쿼리 위에서 아래로 모달팝업 on / is /

 전체메뉴 버튼 클릭시 전체 모달 팝업이 내려옴

 

버튼 다음으로 나와야하기때문에 

태그를 버튼 다음으로 

키보드 접근성을 맞춰야 되기 때문에 

탭키도 마찬가지 

 

무조건 클릭하는 요소 다음으로 배치한다

 

  // 헤더전체메뉴

  $('#header .btn_all').on('click', function () {

    $('#header .all_menu_wrap').fadeIn().addClass('on');

  });

  $('#header .btn_close').on('click', function () {

    $('#header .all_menu_wrap').hide().removeClass('on');

  });

 

 

 

 

  $('#header .btn_all').on('click', function (e) {

    e.preventDefault;

    $('#header .all_menu_wrap').fadeIn().addClass('on');

  });

  $('#header .btn_close').on('click', function () {

    $('#header .all_menu_wrap').hide().removeClass('on');

  });

 

 

 

 

 

 

 

문제점

검색모달이 열린상태에서 전체모달을 키면 두개가 겹쳐 나옴

 

#header .btn_all 클릭시 .search_wrap 이 열려있으면

search_wrap을 닫기

 

(판단조건 : $('.search_wrap').css('display')이 block 이면 열려있는것

 

 

if ($('#header .search_wrap').css('display') === 'block') {

  $('#header .util_wrap .btn_toggle').removeClass('on');

  $('#header .search_wrap').slideUp();

  $('.dimmed').hide();

}

더 간단히 트리거로 단축 

    if ($('#header .search_wrap').css('display') === 'block') {

      $('#header .util_wrap .btn_toggle').trigger('click');

      // 위쪽 btn_toggle on click 을 트리거로 강제 시행시 하위요소 꺼짐

      // $(this).toggleClass('on');

      // $('#header .search_wrap').slideToggle();

      // $('body').toggleClass('on');

    }

 

 

    if ($('#header .search_wrap').is(':visible')) {

      $('#header .util_wrap .btn_toggle').trigger('click');

    }

$(element).is(":visible")

is 로 요소가 있으면 true 로 인식