-
팝업(popup) 반응형tip 2022. 11. 3. 13:52
pc에서는 dim 없이 absolute로 버튼 위치에,
모바일에서 팝업 중앙 정렬
big-wrap이 dim 역할
<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /><title>팝업 반응형</title><style>.popup{display:none;}
@media (max-width: 960px){.big-wrap{position: fixed; width: 100%; height: 100%; top: 0; left:0; z-index: 100; display:none; flex-wrap: wrap; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.5);} //.popup{position:relative; display:block; width: 200px; height: 300px; background:#fff;}}</style></head><body><button type="button" class="btn-open">공유</button><div class="big-wrap"><div class="popup"><strong>공유하기</strong><button type="button" class="btn-close">닫기</button><ul><li><a href="javascript:;">페이스북</a></li><li><a href="javascript:;">트위터</a></li><li><a href="javascript:;">카카오톡</a></li><li><a href="javascript:;">네이버</a></li></ul><div class="linkCopy"><span class="linkCopyTxt">링크가 복사되었습니다.</span></div></div></div></body><script>var UserAgent = navigator.userAgent;if(UserAgent.match(/iPhone|iPod|iPad|iPad2|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) {
$('.btn-open').on('click', function(){$('.big-wrap').css('display', 'flex');})$('.btn-close').on('click', function(){$('.big-wrap').css('display', 'none');})
}else{$('.btn-open').on('click', function(){$('.big-wrap .popup').css('display', 'block');})$('.btn-close').on('click', function(){$('.big-wrap .popup').css('display', 'none');})
}</script></html>* pc에서 bottom이나 right 썼으면 bottom: auto; right: auto; 로 포지션 풀어주기* 팝업 처음에 안보여야하니까 display:none; 이 최종적으로 들어가고 스크립트에서 flex처리◆ - 모바일적용 스크립트 - ◆
1. 실제 적용했던 스크립트(#8071)
<script>function isMobile() {return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent);}
if (isMobile()) {// 모바일에서 실행될 코드} else {// 모바일 아닐 때 실행될 코드}</script>2. 로컬에 적용했던 스크립트(위에 예시)
<script>var UserAgent = navigator.userAgent;
if(UserAgent.match(/iPhone|iPod|iPad|iPad2|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null) {
// 모바일에서 실행될 코드})
}else{// 모바일 아닐 때 실행될 코드
}</script>'tip' 카테고리의 다른 글
선택자 (0) 2022.11.04 placeholder 두줄로 만드는법 (0) 2022.11.03 quick메뉴/follow메뉴/floating메뉴 만들기 (0) 2022.11.03 input type="number" maxlength 스크립트 (0) 2022.11.03 [vscode] 정규식 찾기 (0) 2022.11.03