[vue] vue 모달창, 다이얼로그 기능 구현하기(ft. slot) vue.js 가이드를 활용하여 모달창을 구현하겠습니다. 참고문서 vuejs.org/v2/examples/modal.html Modal Component — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 위의 링크로 이동하여, html과 css의 코드를 그대로 나의 문서에 적용시키면 됩니다. 모달창 적용 방법 1. Modal.vue 의 파일(모달용 하위 컴포넌트)을 하나 생성합니다. 2. 상위 컴포넌트에 Modal 컴포넌트를 부릅니다.(import) 3. 가이드의 코드를 위의 컴포넌트들에게 적용합니다. 구현 화면 Modal.vue(모달용 하위 컴포넌트) default header default body default footer close .. [js] 자바스크립트 모달창(팝업창) 구현 자바스크립트를 이용하여 모달창(팝업창)을 만들겠습니다. 요즘에는 제이쿼리를 사용하지 않고, 순수한 자바스크립트, 바닐라 js를 이용한 기능 구현을 많이 합니다. 모달창 띄우기 구현내용 · 버튼 클릭시 모달창 open · 모달창을 제외한 배경(background)는 어두운 검은 배경 · X 버튼 클릭시 모달창 close · 검은 배경 클릭시 모달창 close 모달창(팝업창, 다이얼로그)창 띄우기 예제 html, javascript 모달창 open Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur quam nobis quis corrupti amet maxime neque, optio, in illo, voluptatibus cons.. 이전 1 다음 반응형
