bootstrap 반응형, 레이어 팝업(PC, MOBILE) 제어 script

제목 : bootstrap 반응형, 레이어 팝업(PC, MOBILE) 제어 script

소스 :

<script>

var isMobile = {

Android: function() {

return navigator.userAgent.match(/Android/i);

},

BlackBerry: function() {

return navigator.userAgent.match(/BlackBerry/i);

},

iOS: function() {

return navigator.userAgent.match(/iPhone|iPad|iPod/i);

},

Opera: function() {

return navigator.userAgent.match(/Opera Mini/i);

},

Windows: function() {

return navigator.userAgent.match(/IEMobile/i);

},

any: function() {

return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());

}

};

$(document).ready(function(){

  if(!isMobile.any() ) { //check if it is not mobile

  $('#modalPopView_MOBILE').modal('show');

  $('#modalPopView_PC').hide();

  } else {

  $('#modalPopView_MOBILE').modal('hide');

  $('#modalPopView_PC').show();

  }

});

</script>

내용 :

bootstrap 기반 반응형 사이트 제작시, "오늘하루팝업레이어"를 PC 버전과 MOBILE 버전으로 나눌 때, 유용한 script

하지만 위의 소스로만 적용하면 

1. ipad(992), ipad pro(1024 사이즈) 에서는 2개 레이어가 동시에 나타하는 현상 발생.

2. 브라우저 실시간 resizing 시 적용이 안됨.

3. 가로길이를 ipad 기준으로 하여 스크롤 width 인 18을 차감한 974 로 브라우저 width 를 계산하여, if 로 구분 처리

참고로, PC용은 레이어로, MOBILE 은 modal 을 사용함.

1. #modalPopView_PC ==> PC용 레이어팝업 id

2. #modalPopView_MOBILE ==> MOBILE용 레이어팝업 id

------------------------------------------------------------------------------------

$(window).on("load resize",function(){

$('#modalPopView_PC').removeClass('d-lg-block');

$('#modalPopView_MOBILE').modal('hide');

  if ($(window).width() > 974) {            //992 이상

if( !isMobile.any() ) {                 //is not mobile

$('#modalPopView_PC').addClass('d-lg-block');

$('#modalPopView_MOBILE').modal('hide');

} else {     //is mobile

$('#modalPopView_PC').removeClass('d-lg-block');

$('#modalPopView_MOBILE').modal('show');

}

  }

  if ($(window).width() <= 974) {

                $('#modalPopView_MOBILE').modal('show');

$('#modalPopView_PC').removeClass('d-lg-block');

  }

});

예제 소스 파일 :

 출처 :  나