더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
총 8개의 일치하는 문서를 찾았습니다.
- webdevetc
[element-ui] 엘리먼트 UI dialog 컴포넌트 예제 및 방법
VueJS에서 많이 사용되는 UI 라이브러리인 element UI의 diablog 컴포넌트에 대하여 알아봅니다.# dialog component화면에 window.open()의 새로운 창이 아닌 내부 레이어를 사용한 모달창을 띄우는 경우 dialog라고 부르기도 합니다. 엘리먼트UI(element UI) 역시 dialog를 사용할 수 있도록 컴포넌트를 제공합니다.<el-dialog></el-dialog>이 컴포넌트를 사용하면 쉽고 빠르게 모달창을 만들고 제어하는 것이 가능합니다. 몇 가지 장점으로는...- Body 태그에 추가할 수 있음- ope...
Last Modified : 2021-08-19 18:20:16
Created : 2019-11-07 16:56:39 - react native
React Native Modal Component 알아보기
React Native의 Modal 컴포넌트는 웹 인퍼페이스 중 하나인 모달(Modal)을 쉽고 빠르게 만들어 주는 내장 컴포넌트입니다. 아래에서는 프로퍼티 및 메소드를 알아보고 예제를 만들어보겠습니다.# React Native Modal 알아보기먼저 Modal을 어떻게 사용하고 어떤 프로퍼티와 메소드를 가졌는지 알아보겠습니다. 다음과 같은 모습을 하고 있습니다.<Modal />Modal의 기능은 프로퍼티를 적용하여 사용하며 프로퍼티들은 애니메니션을 포함한 다양한 기능의 프로퍼티를 가지고 있습니다. 자세하게 하나씩 알아보겠습니다.visible [ Boole...
Last Modified : 2018-11-08 15:52:09
Created : 2018-11-07 11:16:56 - webdevetc
부트스트랩 모달창 세로정렬 방법
부트스트랩(Bootstrap)을 사용하여 모달창을 만드는 경우 세로정렬하는 방법에 대하여 알아봅니다. 부트스트랩 창을 띄우면 위쪽 영역에 모달창이 나타납니다. 이를 세로방향의 가운데로 위치시키는 방법입니다.만약 모달창의 id 값이 myModal이라면 아래와 같이 css style을 설정합니다.<div id="#myModal" class="modal fade"> Vertical align for bootstrap modal.</div>여기서 위 태그 영역의 height의 절반 만큼 margin-top의 마이너스 값을 설정하도록 합니다. ...
Last Modified : 2019-08-06 00:05:33
Created : 2017-06-07 21:37:06 - bootstrap
부트스트랩 모달 창 사용하는 방법
부트스트랩의 모달 창을 사용하는 방법을 알아보려합니다.부트스트랩 UI는 기본적으로 모달창을 플러그인 형태로 사용 가능합니다. 만약 부트스트랩 라이브러리가 추가되지 않은 경우 먼저 아래 링크에서 다운 추가하시기 바랍니다.http://getbootstrap.comhttp://v4-alpha.getbootstrap.com/components/modal/# 모달창이란?모달창은 브라우저의 별도창 또는 탭 윈도우와는 다른 내부 레이어로 만들어진 윈도우입니다. 관련성이 적은 콘텐츠를 별도 UI에서 보여주는 매우 자주 사용되는 방법입니다. 아래의 링크에서 더 자세한 정...
Last Modified : 2017-10-26 17:06:36
Created : 2017-05-12 08:26:48 - etc
부트스트랩 모달 창 닫는방법
부트스트랩 모달 창 닫는 방법입니다.만약 id값 modal의 부트스트랩 모달창이 열려있는 경우$('#modal').modal('hide');반대로 닫혀있는 모달창을 열기위해서는$('#modal').modal('show');제이쿼리를 사용한 방법입니다. 부트스트랩은 제이쿼리가 필요합니다.code snippet widget...
Last Modified : 2017-05-11 13:59:10
Created : 2017-05-11 13:56:55 
js[자바스크립트] 오늘 하루만 팝업 띄우기
자바스크립트를 사용해 팝업창을 띄우는 방법은 그다지 어렵지 않습니다. window 객체의 open() 메소드를 사용하여 원하는 팝업을 한개 또는 다수 띄울 수 있죠. 하지만 만약 오늘 하루... 24시간 동안 팝업을 띄우지 않을 경우에는 어떻게 해야할까요? 아래는 24시간 동안 팝업을 띄우지 않는 방법에 대하여 알아보고 이를 사용한 예제소스를 함께 확인해보도록 하겠습니다.# 24시간동안만 띄우는 팝업창 구현하기먼저 팝업창을 구현할 경우 팝업창을 '닫기' 또는 '하루만 열기' 등의 다음과 같은 버튼들이 존재합니다. 일반적으로 아래 세가지 버튼이 가장 많이 사용되고있죠....
Last Modified : 2018-10-25 15:58:24
Created : 2016-05-30 09:24:05
webdevetc웹에서 모달창과 팝업창의 장단점 알아보기
웹에는 숨겨진 영역이나 별도 공간을 필요한 상황에만 보여주는 다양한 인터페이스 요소가 존재한다. 가장 넓리 쓰이는 것들 중 하나가 팝업창 및 모달창이다. 이 둘 사이의 차이점과 특징에 대하여 알아보고 어떤 장단점이 있는지도 알아보고자 한다.# 팝업창 그리고 모달창의 공통점과 다른점먼저 이 둘의 공통점과 차이점이 무엇인지 간략하게 알아보면 아래와 같다.! 팝업창과 모달창의 공통점이 둘의 공통점은 특정 영역의 위치에 원하는 사이즈의 별도 레이어를 만들어 방문자에게 원하는 시점에 보여준다는 점이다. 또한 현재 보여지는 웹사이트의 콘텐츠를 가릴 수는 있으나 없애거나 볼 수 ...
Last Modified : 2018-01-01 12:27:02
Created : 2016-03-24 08:08:50
jshtml 팝업창 띄우는 방법 및 고려할 사항들
안녕하세요! 팝업창을 띄우고 사용하는 방법과 기타 정보들을 모아 모아서 적어보도록 하겠습니다. 가장 먼저 팝업창은 무엇이고 언제사용하는지 간단히 적어보겠습니다. # 팝업창(Pop_up window)이란?팝업창이란 현재의 브라우저에서 추가적으로 웹페이지를 브라우저로 여는 것을 말합니다. 즉, 처음 열린 웹페이지 이외의 다른 내용을 가진 페이지를 열 수 있게합니다.팝업창을 열기위해서는 자바스크립트를 사용하며 사용자가 팝업창을 여는 액션이 사용자의 요청으로 여는 것이 아닌 사이트 운영자가 의도를 통해 열기 때문에 브라우저에는 팝업창을 강제로 열지 못하도록 막는 선택옵션 사...
Last Modified : 2018-07-25 10:58:08
Created : 2016-01-19 13:07:49