-
Notifications
You must be signed in to change notification settings - Fork 5
Modal
모달은 일시적으로 콘텐츠 보기를 제공하는 창입니다. 보통 선택을 하거나 항목의 편집에 사용됩니다.
- 스크립트 위치 : rc-component.js > modal.js
- [기본 사용법(Usage)](#기본 사용법(Usage))
- [애니메이션(animation) 적용](#애니메이션(animation) 적용)
- 옵션(Options)
- 메소드(Methods)
- 이벤트(Events)
- 응용방법
다른 모달이 보이는 동안에 모달은 열리지 않습니다. 동시에 하나보다 많은 모달을 보이는 것은 맞춤 코드가 필요합니다.
다른 콤포넌트가 모달의 모습이나 기능에 영향을 끼치지 않도록 항상 모달의 HTML 코드를 문서 하단에 위치하도록 하세요
모달은 요구에 따라 data 속성이나 자바스크립트를 통해 숨겨진 콘텐츠를 토글 합니다.
자바 스크립트 없이 모달을 활성화합니다. 버튼같은 태그에 data-toggle="modal" 을 추가하고, data-target="#foo" 나 href="#foo" 와 같이 토글할 특정한 모달을 정해주면 됩니다.
<button type="button" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
한 줄의 자바스크립트로 myModal 의 id 를 가진 모달을 불러옵니다
$('#myModal').modal(options)
모달이 호출될 때, 에니메이션 효과를 적용합니다. 지정된 값은 모달 컨테이너에 class 에 적용되며, 미 지정시 기본 slide-up 애니메이션 효과가 적용됩니다.
옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-selector="" 처럼 data- 에 옵션명을 덧붙히면 됩니다.
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| show | boolean | true | 모달을 호출하는 역할을 합니다. 기본값이 true 이기 때문에 호출시 설정하지 않아도 됩니다. |
| title | string | null | |
| url | string | null |
true 인 경우 브라우저의 url 에 적용됩니다. true 인데 값이 없는 경우 기본값# 이 적용됩니다. |
| history | boolean | true | window.history 객체에 적용되어 back 버튼을 사용해서 컴포넌트를 닫을 수 있게 해줍니다. 기본값이 true 이므로 설정하지 않기 위해서는는 아래와 같이 2가지 방법이 있습니다. |
| template | string | null | 컴포넌트를 호출한 후에 외부의 파일을 load 해야 할 경우 사용하면 됩니다. |
- 데모(data 속성 방식)
- 데모(script 방식)
모달을 활성화 합니다. object 를 이용해서 옵션을 넣을 수도 있습니다.
$('#myModal').modal({
title : ‘타이틀’
})
수동적으로 모달을 토글합니다. 모달이 실제로 보여지거나 숨겨지기 전에 호출자에게 리턴합니다. (말하자면 shown.rc.modal 나 hidden.rc.modal 이벤트가 발생하기 전에)
$('#myModal').modal('toggle')
수동적으로 모달을 엽니다. 모달이 실제로 보여지기 전에 호출자에게 리턴합니다. (말하자면 shown.rc.modal 이벤트가 발생하기 전에)
$('#myModal').modal('show')
모달 클래스는 모달의 기능적인 부분을 후킹하기 위한 약간의 이벤트들을 제공합니다.
모든 모달 이벤트는 모달 자신에서 발생됩니다. (다시말해서 <div class="modal"> 에서)
| 이벤트 | 설명 |
|---|---|
| show.rc.modal | 이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 발생합니다. 만약 터치에 의한 것이라면, 터치된 요소는 이벤트의 relatedTarget 속성으로 가능합니다. |
| shown.rc.modal | 이 이벤트는 모달이 사용자에게 보여졌을 때 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). 만약 터치에 의한 것이라면, 터치된 요소는 이벤트의 relatedTarget 속성으로 가능합니다. |
| hide.rc.modal | 이 이벤트는 hide 인스턴스 메소드가 호출되는 즉시 실행됩니다. |
| hidden.rc.modal | 이 이벤트는 모달이 가려지는게 끝났을 때 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). |
| loaded.rc.modal | data-template 값으로 정해진 원격 마크업이 load 된 후 실행되는 이벤트 |
$('#myModal').on('hidden.rc.modal', function (e) {
// do something...
})
HTML5 가 시멘틱을 정의하는 방법에 따르면, autofocus HTML 속성은 RC 모달에는 효과가 없습니다.
거의 같은 모달을 작동시키는 몇개의 버튼을 가지고 싶으세요? 버튼이 터치 됨에 따라 달라지는 내용을 위해서 event.relatedTarget 와 HTML data-* 속성을 사용하세요. relatedTarget 에 자세한 것은 팝업 이벤트 문서를 보세요.
모달 호출을 탭(tap) 아닌 더블탭(double tap)이나 프레스(press)로 변경할 수 있습니다.