이전에 썼던 스크립트들을 정리하다가 만들어둔 팝업창을  Esc키로 끄는 구문을 다시끔 보게됐는데,

 그때는 스크립트를 넣기만 했었지 따로 소스를 자세히 볼 생각을 못했어서 이번 기회에 구문을 다시

 보면서 다시끔 공부를 하는 기분이 들었습니다.

 Esc로 팝업창을 닫는 스크립트는 아래와 같습니다.

window.onkeyup = function(e) {
	var key = e.keyCode ? e.keyCode : e.which;

	if(key == 27) {
		$(".modal").fadeOut(90);
		$("body").css({overflow:'scroll'}).unbind('touchmove');
	}
}

 (이 아래 내용은 제가 공부 겸 메모로 적어놓은 구문풀이 내용임을 참고부탁드립니다)

 변수 key값이 e.keyCode ? e.keyCode : e.which; 구문 형태를 띄고 있는데,

 해당 구문은  조건부(삼항) 연산자로 e.keyCode가 true면 e.keyCode가 실행, false면 e.which가 실행된다고 합니다. 

조건부(삼항) 연산자는 if..else문의 단축형으로

 if..else문을 사용하면 너무 복잡해지는 식에서 사용된다고 하는데 

매번 보기만 해왔었지 이게 무슨 구문일지를 생각해오지 않았었다는게 다시끔 안습... 

(여기서 event.which는 키보드 키 또는 마우스버튼이 이벤트에 대해 눌러졌는지 반환합니다.)

if문에 쓰인 27의 경우는 keycode table에서 27이 Esc를 의미하기에 쓰인 값이며,

unbind는 이전에 연결된 이벤트 핸들러를 요소에서 제거하는 때에 쓰이는 메서드로 쓰인다고 하네요.

* 팝업 : https://codepen.io/tamak/pen/nquir?page=1&

코딩을 완료 후, 크롬에서는 아무 이상이 없었던 background의 이미지가 익스플로러에서 흐릿하게 뭉개지는 현상이 있었습니다.

css를 잘못 입력했나 이것저것 입력해봤는데 소용이 없더라구요.

구글링해보니 저와 같은 문제를 겪은 분이 계셨고, 그 분이 남기신 url로 들어가보니 왜 이런 문제가 생기는 지 알 수 있었는데요.

제 경우는 이미지보다 작은 엘리먼트에 해당 이미지를 background-image로 설정해서 발생한 버그였었습니다.

다행히도 이미지를 엘리먼트에 맞게 크롭하니 익스플로러에서도 이미지가 제대로 나오는 것을 확인할 수 있었구요.

(position을 center로 두는 것도 버그에 포함될 수도 있다고 하는데 이 부분은 참고로 알아두면 좋을 것 같습니다.)

이미지를 통째로 background로 넣기보다 이미지에 텍스트나 따로 뺄 수 있는 이미지 레이어가 있다면 분리해서 

background로 넣을 때 분리해서 넣는 것이 좋을 것 같다는 생각이 들었습니다.

... 꼭 크롬에서는 괜찮다고 여기면 늘 익스플로러에서 말썽이니;;

저만 번거롭게 느껴지는 걸까요. 크로스브라우징 체크는 기본이라고는 하지만

뭔가 손이 두번 세번 더 가는 기분이 들고 여간 번거로운게 아니네요.

++ 근래에 같은 버그가 또 생겨서 이유를 살펴보니 Element에 width 값을 주지 않아서 이미지가 흐릿하게 보이더라구요. 

위 방법으로 안될 시에는 width값을 주는 것도 방법이 될 것 같습니다.

* 참고 사이트 

- http://www.i-swear.com/956

- http://connect.microsoft.com/IE/feedback/details/810354/ie11-css-background-image-show-blur

모달창을 띄우고 그 안에 slick 슬라이더가 돌아가게 만드는 페이지를 코딩 작업중에 있었는데

이상하게 모달을 띄우면 슬라이더에 있는 이미지가 한대 뭉쳐져선 움직이지 않더군요.

글머리 기호를 클릭하거나 prev,next 버튼을 누르면 그제야 slick 슬라이더가 제대로 구현됐는데... 

그렇다고 사용자한테 글머리 기호 클릭하라고 할 수는 없는 노릇이니 어떻게든 오류를 수정해야만 했습니다.

css 뜯어고치고 모달 플러그인을 갈아엎고 슬라이더를 갈아엎고 별 난리를 쳐도 

저 상태가 계속 유지되서 북치고 환장할 노릇이었죠. -_-;;

하다가 도저히 안되겠어서 나같은 삽질자(..)가 분명 어딘가에 있겠지 싶어 열심히 구글링으로 뒤져보았는데

다행히도 저랑 같은 문제를 가지고 있던 분이 올린 게시물을 찾을 수 있었습니다.

https://stackoverflow.com/questions/26271790/slick-js-and-multiple-twitter-bootstrap-modal-windows

쉽게 말해 resize 함수를 쓰라는 내용이었죠. 

resize() 함수는 창의 크기가 변할때 무언가 처리하고 싶을때 쓰는 함수인데, 

제가 원하는 건 모달이 열릴때 슬라이더가 제대로 구현되어 작동되는 것을 원하는 거였으니까 

모달 팝업 자바스크립트에 해당 구문을 넣어야겠다는 생각이 들었습니다. 

settings = {
    //Model Popup
    objModalPopupBtn: ".modalButton",
    objModalCloseBtn: ".overlay, .closeBtn",
    objModalDataAttr: "data-popup"
}  
  $(settings.objModalPopupBtn).bind("click", function () {
        if ($(this).attr(settings.objModalDataAttr)) {

            var strDataPopupName = $(this).attr(settings.objModalDataAttr);

            
            //Fade In Modal Pop Up
            $(".overlay, #" + strDataPopupName).fadeIn(170);
	    $('slick 플러그인 클래스명').resize();
        }
    });

    //On clicking the modal background
    $(settings.objModalCloseBtn).bind("click", function () {
        $(".modal").fadeOut(90);
    });

$('slick 플러그인 클래스명').resize();를 넣으니까 그제야 제대로 구현이 되더라구요. 

이 한줄을 위해서 얼마나 삽질을 했던가... 혹시라도 모달 팝업창에 slick 슬라이더 넣으셔야하는 분들은 참고하셔도 좋을 것 같습니다.

* 팝업 : https://codepen.io/tamak/pen/nquir?page=1&

* slick slider 플러그인 : http://kenwheeler.github.io/slick/