# popup

help

jquery cookie 플러그인 사용 시 첨부 script 시작! 1. cookie 쿠키보는 법 : 개발자도구 - application - Cookies 에서 확인가능 쿠키 삽입 (jquery와 javascript 비교) 쿠키 보기 (jquery와 javascript 비교) 2. expires 와 시간표기 쿠키를 삽입후 expires를 확인하면 원하는 시간과 다른 시간이 나오는것을 확인할 수 있음 쿠키의 expires 옵션은 반드시 GMT(Greenwich Mean Time)포맷으로 설정되어야 하는데 GMT / UTC 포맷은 우리나라 표준시보다 9시간 느림 예) UTC상으로 15시이면 우리나라 표준시는 24시(15+9시간) toGMTString(), toUTCString() 메서드로 변경할 수 있음 참고로 우리나라 표준시로 쉽게 바꾸고 싶다면 toString() 쓰면 됨

blcoding_2023

🏁 Popup (새창에서 열기) * ✔ index.jsp >> * * ✔ popup.jsp >> * * ✔ index.js >> * * ✔ popup.js >> * * 📺 화면 출력 >> * 팝업열기 버튼을 눌렀을 때 >> 팝업 >> index.jsp 화면 >> [팝업 옵

h_jinny

특정 페이지의 SNS 등 외부 공유를 위해 URL 링크를 생성하고 싶었다. 링크에 접속하면 특정 팝업이 열린 상태로 페이지가 띄어지는 구조여야 하는데, 해보지 않은 작업이라 애를 좀 먹었다. 해결 방법: URL 검색창에 내가 정한 [팝업의 id 가 붙은 url] 을 통해 접근하면 거기서 해당 id 를 추출해 그에 해당하는 팝업이 띄워지는 구조로 만들어 해결했다. html javascript 검색창에서 접근한 url 의 파라미터를 추출 파라미터에서 ? 제외 해당 파라미터를 자바스크립트 객체로 만들어 key 값으로 팝업 id 추출 출처: URL 파라미터를 JavaScript 객체로 변환하는 방법 추출한 팝업 id 에

h_jinny

페이지 작업을 하던 중 팝업창 기능을 구현하고 있었다. 그리고 닫기 버튼을 누르는 기능에서 클릭된 버튼(event.target)의 부모를 찾아 해당 버튼을 자식으로 가진 팝업을 닫는 기능을 작업던 중 작은 문제가 발생했다. 팝업창 닫기 버튼을 누르는 기능에서 클릭된 버튼(event.target)의 부모를 찾아 해당 버튼을 자식으로 가진 팝업을 닫는 기능을 작업중이었다. ⇒ parentNode 를 통해 버튼의 부모에 해당하는 팝업을 찾는 식 하지만 팝업의 html 구조를 수정할 때 부모가 바뀌었고, 이때 해당 기능이 동작하지 않게 된다. 이에 대한 해결책으로 단순히 부모를 찾는 parentNode 보다, 특정 선택자에 일치하는 가장 가까운 조상을 찾아주는 closest() 을 사용하였고, 이는 이후 요소의 구조가 바뀌어도 기능에 문제를 발생시키지 않는 효율적인 방법임을 알게되었다. 고친 부분 출처: [https:

dltmdals9071

팝업창 제가 알고 있는 pop up창을 방법은 총 3가지입니다. dialog태그를 이용한 만들기 js를 통해서 css 변경 window.open을 통해 만들기 dialog !codepen[Seungmani/embed/oNaBaJp?default-tab=html%2Cresult" ] > - 보여주기 버튼을 클릭하면 dialog를 보여줍니다. dialog는 자동으로 화면중앙에 위치를 하고 나머지 부분을 어둡게 만들어줍니다. 만약 화면 중앙에 위치하지 않으면 css에서 padding, margin 값을 확인해 보세요. js를 통해서 css 변경 !codepen[Seungmani/embed/bGmgmZP?default-tab=html%2Cresult] > - 보여주기 버튼을 클릭하면 div를 보여줍니다. 빨간 테두리가 div의 영역입니다. window.open !codepen[Seungmani/embed/Yz

tygerhwang

앱 강제 종료 시키기 플랫폼 통신(IOS) - Method Channel 플랫폼 통신(Android) - Method Channel 이번 글에서는 앱을 강제 종료 시키는 방법에 대해서 알아 보도록 하겠다. Flutter를 사용해서 강제 종료 시키는 방법과 네이티브에서 강제종료 시키는 방법에 대해서 살펴보면서, 어떤 차이점이 있는지 살펴볼 예정이다. 앱 강제 종료는 주로 Android에서 시스템 뒤로가기 키로 인해서 처리하는 경우가 많고 IOS에서는 주로 처리하지 않는 추세였다. 하지만 IOS에서도 요세 앱을 강제 종료 시켜버리는 추세로 변화하고 있다. IOS는 Android 디바이스에 비해 메모리 용량이 크지 않아 시스템에 의해서 백그라운드 상태의 앱이

bami

지난번에 사용자의 주목을 끄는 웹 UI로 모달을 만들었습니다. 이번에는팝업창을 만드는 방법을 알아보려고 합니다. 모달때에도 설명했지만 모달과 팝업 모두 사용자의 이목을 끌기 위한 UI라고 설명드렸습니다. 다만 모달은 부모 페이지에 조작이 불가능한 반면, 팝업은 팝업창도, 부모 페이지에 대한 조작도 자유로운 점이 있기에 상황에 맞춰 필요한 기능으로 만들어서 사용하시면 됩니다. 팝업창 만들기 HTML index.html 메인 페이지가 되는 index.html입니다. 간단하게 버튼 하나로 화면을 구성했습니다. popup.html 팝업창의 화면인 popup.html입니다.

jeongshin

결과물 react-native-global-components 개발 배경 앱을 개발하다보면 Snackbar(Toast), Popup, BottomSheet 등 Modal 형태의 UI 로 사용자와의 인터렉션을 필요로 하는 컴포넌트들이 있다. 이런 컴포넌트들을 개발하다보면 여러가지 상황에 마주치는데 예를들어 A 라는 상황에 팝업을 보여준다. B 라는 상황에 바텀시트를 보여준다. 라는 코드를 작성했을때, 특정 유저가 두가지 경우를 모두 만족하는 경우 이렇게 컴포넌트가 겹쳐져서 보여지게 되는 경우를 많이 봤었고 이를 해결하고 싶었다. 해결방안 UI

momonak

프로젝트 진행 중, 로그인 후에 에러 메세지를 보여줄 모달창이 필요해졌다. 다른 프로젝트에서도 최대한 재사용이 가능하도록 만들어 보기로 했다. 우선 관련된 모든 파일은 한 폴더 내에서 작업하기로 함! 폴더구조 > 메인파일 : PopupJs.js 상세팝업종류 : component > PopupType.js 스타일 : style.js (styled-components) hook : hook > usePopup.js (팝업 열기,닫기) recoil : state > popupState.js 사용법 > index.js 나 App.js 등 최상단 파일에서 PopupJs.js 컴포넌트를 넣어준다. ![](https://velog.velcdn.com/image

s_honey1122

form 기본 구조 을 요소와 연결하는 방법 에 id 속성을 넣고, 에 id 와 같은 값의 for 속성을 넣기. htmlEventHandler onblur 엘리먼트의 포커스가 해제되었을때 발생 DOMEventHandler 로드될때 함수가 발생하는 것이 아니라, 이벤트로 실행 EI9이상 EventListener 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정 > addEventListener(type

mangojang

✏️ 실무 초기에 ‘팝업’이라는 단어만 알았지 팝업 종류에 대해 잘 알지 못하여 디자이너의 요청 사항에 당황했던 적이 있었다. 더 이상 그날의 실수를 하지 않기 위하여, 팝업의 종류와 쓰임에 대해 정리해 보았다. ‘의미’로 나누면 팝업 vs 모달 ’형태’로 나누면 브라우저(=윈도우), 레이어, 토스트 💡 실무에서는 팝업창 모달창 명칭을 정확하게 구분 하지 않는다. 따라서 개발자는 기획자 or 디자이너에게 띄우는 형태를 어떻게 할 것인가를 물어봐야한다. 브라우저(=윈도우 창) 로 띄울 것 인지, 레이어 형태로 띄울 것인지 팝업 Popup 메인 서비스와 관계 없이 뜨는 독립적인 창 사용자가 마음대로 닫아도 서비스 진행에 차질이 없는 창 ex) 공지사항, 보통 사이트 처음 들어갔을 때 뜨는 창 형태에 따른 종류 브라우저(=윈도우) 팝업 기존 페이지 안에서

shyuuuuni

부스트캠프 그룹 프로젝트 진행 중 Github 로그인을 팝업 브라우저에서 수행한 후 원본 브라우저에 적용하는 기능을 개발해야 했다. 팝업창을 띄우고 로그인을 성공하는 기능까지 개발할 수 있었다. 하지만 로그인이 완료되고 그 정보를 원본 브라우저에 적용하는데 오류가 발생했다. 오류 - DOM Exception: Blocked a frame with origin "..." from accessing a cross-origin frame. > > 이러한 과정들을 기록하려고 포스트를 작성하게 되었다. React 에서 OAuth 팝업 사용하기 (1) 기본 팝업 사용 > 전체적으로 [How to create an OAuth Popup in React](https://elvisciotti.medium.com/how-to-create-a-oauth-popup-in-react-7

honey1122

form 기본 구조 을 요소와 연결하는 방법 에 id 속성을 넣고, 에 id 와 같은 값의 for 속성을 넣기. htmlEventHandler onblur 엘리먼트의 포커스가 해제되었을때 발생 DOMEventHandler 로드될때 함수가 발생하는 것이 아니라, 이벤트로 실행 EI9이상 EventListener 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정 > addEventListener(type, listener); addEventListener(type, listener, options); addEventListener(type, listener, useCapture);

ahncheer

● 기본으로 제공되는 모달 사용하기 1) 코드 작성 ※ lwc013OpenModal.html ※ lwc013OpenModal.js ※ lwc013OpenModal.css 2) 화면 확인 출처 > lwc - alert, confirm, prompt ● cu

ahrkwltlarh

리액트 모달창 구현 이렇게 했는데 자꾸만 바닥에 붙어있었음 이유는 어이ㅓㅈㅄ게도 이렇게 하고 popup 창에만 위치 조정 css를 줌 부모태그인 b-popup은 그냥 밑에 달려있어서 올라오는데 시간이 걸렸던 것 정신차려 ㅜㅋ

jrl103

오늘은 리코일을 공부했다. 공부했는데.. 공부해도 잘 모르겠다.. 공부한 내용들과 실습한 것들을 정리해보겠다. Recoil > 페이스북에서 만든 React를 위한 상태 관리 라이브러리 Recoil을 쓰는 이유 기존의 리액트 상태관리 라이브러리 (ex. Redux) 기존의 리액트 상태관리 라이브러리는 Store 라는 곳에 상태를 저장한다. 여기서 Store는 외부 요인이기 때문에 리액트의 내부 스케줄러에 접근할 수가 없게 된다. 그리고 리액트에서도 동시성 모드(concurrent mode)가 등장하면서 리액트와 동시성 모드를 사용할 수 있는 방법을 고민하게 되었다. > 또한, 리덕스와 같은 라이브러리는 Store를 구성하기 위해 많은 양의 코드를 작성해야 하고, 비동기 데이터 처리를 하기 위해서는 Redux-saga와 같은 별도의 라이브러리를 추가로 사용해 주어야 하는 불편함이 있다. 리액

ss0510s

팝업창 구현 첫번째 문제점 처음엔 모달창으로 만들려고 했으나 기존의 윈도우 위에 생기고, 기존 창에 접근할 수 없음 기존의 창과 구분되는 새로운 창이 열리도록 해야함 구현 window.open을 사용 > window.open('path','popup창 이름', '화면 크기 및 위치') : 새로운 창을 띄움 > - path: 라우터에 등록된 경로로 팝업창의 URL 경로 > - popup창 이름: 창의 이름 > - 화면 크기 및 위치 : 화면 상에 어디에 위치할 지 좌표와 크기 설정 새로운 팝업창의 component 구현 > window.close() : 화면을 닫음 > window.opener.parent.location.reload() : 부모창을 새로고침함 두번째 문제점 기존 부모 페이지와 새로운 팝업창 간의 통신 방법이 필요 여러가지 방법으로 구현해 보았으나 실패 결국 localstorage를 사용하는

jinic

https://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen

jjhstoday

.png) 2022년 시즌 이벤트 모달창을 개발하던 중이었다. 개발을 하면서 페이지로 이동할 때마다 열리는 모달창 때문에 사용자 경험 측면에서 조금 거슬릴 것 같다고 생각을 했다. 디자인 시안과 기획안 모두에 "오늘 하루 동안 이 창을 열지 않음"이라는 기능은 없었지만!!! 기획팀에 해당 기능 추가에 대한 의견을 남기어 개발하게 되었다. 해당 프로젝트는 레거시 코드이기 때문에 라이브러리(리액트, 뷰, 앵귤러 등)를 사용하지 않고 순수 자바스크립트로만 개발

mongma-n

ios safari 팝업 제한 정책 기본적으로 Safari 에서는 사용자 Click Event 에서만 window.open 을 통한 팝업을 허용하고 있다. 보안 정책 중 하나로 Script 만으로 무분별한 팝업 호출을 제한하고자 하는 목적이다. Ajax Callback 이나 다른 Function 의 호출 scope 안에서의 window.open 도 허용되지 않는 것과 같다. 아래와 같이 해결할 수 있다. Solution