uiux 17일차

팝업구현 팝업 2개
:html 에 버튼1 처럼 버튼2를 똑같이 만든다
:js에 함수를 똑같이 사용하되 클래스를 다르게 줘서 구분할 수 있도록 해줘야한다.

---

팝업구현 팝업 2개 1개의 함수

-function Popup__init(no)

function Popup__init(no) {
  $('.btn-popup-' + no).click(function() {
    $('.popup-' + no).addClass('active');
  });
  
  $('.popup-' + no + ' .popup__btn-close').click(function() {
    $('.popup-' + no).removeClass('active');
  });
}
Popup__init(1);
Popup__init(2);

'popup-'을 써서 모든 popup~시작되는 걸 포함하고
(no)를 써서 구분

---

preventDefault

브라우저의 기본 동작

<참고>
https://programming119.tistory.com/100

---

stopPropagation

전파되는걸 막고싶을때 쓸 수 있는 것

:자신이 클릭된 것은 알지만 부모한테 전파하는 걸 막음
return false와는 다름

---

alert
: alrert('hi');를 쓰면 위에서 hi 라는 팝업창이 내려온다

confirm
:let rs = confirm('정말 삭제하시겠습니까?');
를 쓰면 alert 와 같지만 문자를 추가할 수 있다

==js에만 적용할 수 있는게 아니라 html에도 넣을 수 있다

<button type="button">작성2</button>

  <a onclick="if ( confirm('정말 삭제하시겠습니까?') == false ) { return false; }"
  href="https://www.naver.com" target="_blank">삭제</a>
  
  <a onclick="if ( !confirm('정말 삭제하시겠습니까?') ) { event.preventDefault();
  }" href="https://www.naver.com" target="_blank">삭제2</a>

evnt.preventDefault
:특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킴

(반대는 ! )

---

팝업창의 다른부분을 눌러도 꺼지게 하기

function Popup__init(no) {
  $('.btn-popup-' + no).click(function() {
    $('.popup-' + no).addClass('active');
  });
  
  $('.popup-' + no + ' .popup__btn-close, .popup-' + no).click(function() {
    $('.popup-' + no).removeClass('active');
  });
    
  // 위 코드는 아래 주석된 코드와 같은 의미 입니다.
  /*
  $('.popup-' + no + ' .popup__btn-close').click(function() {
    $('.popup-' + no).removeClass('active');
  });
  
  $('.popup-' + no).click(function() {
    $('.popup-' + no).removeClass('active');
  });
  */
}
Popup__init(1);
Popup__init(2);

---

팝업의 content 부분을 눌러도 안꺼지게 하기

function Popup__init(no) {
  $('.btn-popup-' + no).click(function() {
    $('.popup-' + no).addClass('active');
  });
  
  $('.popup-' + no + ' .popup__btn-close,.popup-'+ no).click(function() {
    $('.popup-' + no).removeClass('active');
  });


  $('.popup-' + no + ' .popup__content').click(function(e) {
    e.stopPropagation();
    //return false; =>안 먹는다면 이 코드를 사용
  });

}
Popup__init(1);
Popup__init(2);

e.stopPropagation
=>이 코드를 사용했기에 최상위에 있는 요소까지 전파가 된 것

---

스크롤바 생기게 하기

.popup__body {
  padding:0 10px;
  max-height:calc(100vh - 55px);
  overflow-y:auto;
}

auto일 때 해당요소를 숨기고 스크롤바를 통해서 볼 수 있게끔 한다.
<참고>
https://electronic-moongchi.tistory.com/62

---

버튼을 이용해서 스크롤바 여부 정하기

CSS

.popup-1-actived,
.popup-1-actived > body {
  overflow:hidden;
}

.popup-2-actived,
.popup-2-actived > body {
  overflow:hidden;
}

JS

function Popup__init(no) {
  $('.btn-popup-' + no).click(function() {
    $('.popup-' + no).addClass('active');
    $('html').addClass('popup-' + no + '-actived');
  });
  
  $('.popup-' + no + ' .popup__btn-close, .popup-' + no).click(function() {
    $('.popup-' + no).removeClass('active');
    $('html').removeClass('popup-' + no + '-actived');
  });
  
  $('.popup-' + no + ' .popup__content').click(function() {
    return false;
  });
}
Popup__init(1);
Popup__init(2);

overflow:hidden
$(html) popup으로 시작하고 actived로 끝나는 것~

---

function Popup__init(no) {
  $('.btn-popup-' + no).click(function() {
    Popup__show(no);
  });
  
  $('.popup-' + no + ' .popup__btn-close, .popup-' + no).click(function() {
    Popup__hide(no);
  });

function Popup__show(no) {
  $('.popup-' + no).addClass('active');
  $('html').addClass('popup-' + no + '-actived');
}

function Popup__hide(no) {
  $('.popup-' + no).removeClass('active');
  $('html').removeClass('popup-' + no + '-actived');
}

코드가 가독성이 떨어질 때

---

function Popup__show(no) {
  $(`.popup-${no}`).addClass('active');
  $('html').addClass(`.popup-${no}-actived`);
}

그레이브 도입
계속 반복되는 +no+를 줄인것