팝업창
-
window.open() 팝업창 구현하기 :: 마이구미Javascript 2021. 6. 5. 20:34
이 글은 widnow.open() 을 통해 새 페이지를 띄우는 팝업창을 다뤄본다. 팝업창은 여러 상황에서 따라서 메인 페이지와 통신하기도 하고, 어떤 시점 닫아야하기도 한다. 이러한 방식을 위한 구현, 주의사항, 웹앱 이슈 등을 알아본다. 우선 여기서 말하는 팝업창은 팝업이라는 용어와 비교하겠다. 팝업은 같은 창에서 단순히 div 태그를 absolute 형태로 보여지는 형태이다. 팝업창은 같은 창이 아닌 새로운 창을 의미한다. 위 이미지처럼 서로 다른 창으로 존재한다. 이렇게 새로운 팝업창을 띄우는 경우는 다음으로 나열할 수 있다. SNS 로그인 본인인증 모듈창 다른 페이지 or 다른 도메인의 페이지가 필요할 경우. 자바스크립트에서는 window.open() 을 통해 이를 구현할 수 있다. // 기본 예..
-
레아이웃 팝업창 투명도 조절 :: 마이구미HTML, CSS 2017. 1. 5. 21:40
이번 글은 레이아웃 팝업창에 대해서 다뤄본다.팝업창은 누구나 보았거나 개발해봤으리라 생각한다. 팝업창은 크게 2가지로 나눌 수 있다.1. window.open을 사용해 새창으로 팝업창을 띄우기2. 새창을 띄우지 않고 레이아웃 형식으로 팝업창 띄우기 이번 글은 레이아웃 형식의 팝업창에 대해 다룰 것이다.레이아웃 팝업을 사용한다면 거의 투명도 조절을 하리라본다. 위처럼 팝업을 띄우고 팝업 주변은 불투명하게 보여지는 것을 볼 수 있다.레이아웃 팝업은 이런 식으로 많이 활용하고 있다. 구현에 있어서는 어렵지 않다.css를 통해 opacity 속성을 통해 투명도를 조절해주면 된다.#popup { opacity : 0.5; } // 0~1 낮아질수록 투명예를 들어 html로 레이아웃 팝업을 위해서는 아래와 같이 구..