반응형사이트에서 팝업2개띄울때
본문
반응형사이트에서 팝업2개 이상 띄울때
위치를 pc에서는 양옆으로
모바일에서는 위아래로 띄우게 하고싶은데요
어떻게 해야하나요?
답변 3
기본 팝업레이어를 사용하시기 보다는 모달팝업이나. 일반 레이어 팝업을 넣으시는게 편하실거예요.
pc상에서는 position:absolute로 left:0, right:0 으로 좌우로 붙이고
미디어쿼리에서 특정 해상도 이하로 내려갈 때 top:0, bottom:0으로만 바꿔주시면됩니다.
기존의 팝업프로그램은 기준이 top, left 이기 때문에 추가로 bottom, right기준으로 위치를 잡을 수 있게 프로그램을 수정하셔야합니다.
반응형 디자인에 보시면 이런 식의 코드가 있습니다.
@media (max-width: 1200px)
.example {
...
}
모바일의 크기를 평균적으로 잡으신 후
윗분 말씀처럼 top, left 와 bottom, right 기준으로 CSS 코딩을 해주셔야 합니다.
자바스크립트(또는 jQuery)로 작업하는 방법도 있습니다.
이 같은 경우에는 브라우저의 유저 에이전트가 모바일인 경우 강제로 top, left, bottom, right 를 잡아주는 방식입니다.
답변을 작성하시기 전에 로그인 해주세요.
