1 2 3 4 5 6 L

Page Header > Subtitle

[javascript] jQuery 플러그인 부트스트랩의 콤포넌트(modal)

 

Data 속성(Data attributes)

모든 부트스트랩 플러그인은 자바스크립트 한줄 없이 마크업 API 를 통해 사용할 수 있습니다. 이건 부트스트랩의 최고급 API 이며 플러그인을 사용할 때 첫번째 고려사항이 되어야 합니다.

그렇긴 하지만, 어떤 상황에서는 이 기능성을 끄는 것이 바람직할 수도 있습니다. 그러므로, 우리는 문서상에 data-api 로 된 네임스페이스의 모든 이벤트를 해제하는 방법으로 data 속성 API 를 끌 수 있는 기능을 제공합니다. 이것은 다음과 같습니다:

Copy
$(document).off('.data-api')

아니면, 특정 플러그인을 대상으로 하려면, 다음과 같이 data-api 네임스페이스와 함께 플러그인 이름의 네임스페이스 을 포함합니다:

Copy

$(document).off('.alert.data-api') 

 

자바스크립트 API(Programmatic API)

우리는 또한 당신이 순전히 자바스크립트 API 를 통해 부트스트랩 플러그인을 사용할수 있다고 믿습니다. 모든 공용 API 들은 하나로 되어있고, 연결해서 쓸 수 있는 메소드이고, 수행한 후 콜렉션을 돌려줍니다.

Copy
$('.btn.danger').button('toggle').addClass('fat')

모든 메소드에는 옵션 객체나, 특별한 메소드를 대상으로 하는 문자열을 넣을 수 도 있고, 아무것도 넣지 않을 수도 있습니다(기본 옵션으로 플러그인을 실행):

Copy
$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

각 플러그인은 또한 Constructor 속성에서 생성자 코드를 볼 수 있습니다: $.fn.popover.Constructor. 만약 당신이 특정한 플러그인 인스턴스를 얻으려면, 태그 요소로부터 직접 회수할 수 있습니다: $('[rel="popover"]').data('popover'). 


충돌 방지(No conflict)

때때로 다른 UI 프레임워크와 부트스트랩 플러그인을 같이 쓰기 위해 충돌을 방지할 필요가 있습니다. 이런 상황에서는, 네임스페이스 충돌이 가끔 일어납니다. 만약 그런 일이 발생하면, 당신은 noConflict 메소드를 실행하여 다른 네임스페이스를 사용할 수 있습니다.

Copy
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value

$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality


이벤트

부트스트랩은 대부분은 플러그인의 고유 액션들을 위해 맞춤 이벤트를 제공합니다. 이것들은 동사원형이나 과거완료형으로 제공되는데, 동사원형(예. show) 은 이벤트의 시작에 실행되고, 과거완료형(예. shown) 은 액션의 완료에 실행됩니다.

3.0.0 이래로, 모든 부트스트랩 이벤트는 네임스페이스를 가집니다.

모든 동사원형 이벤트는 기능적으로 preventDefault 를 제공합니다. 이것은 그것이 시작되기 전에 액션의 실행을 중지하기 위한 기능입니다.

Copy
$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown

})


애니메이션 제거

모달이 화면에서 페이드되는 것보다 간단하게 나타나기 위해, 모달 마크업에서 .fade 클래스를 제거하세요.

Copy
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  ...

</div>


자바스크립트로

한 줄의 자바스크립트로 myModal 의 id 를 가진 모달을 불러옵니다:

Copy
$('#myModal').modal(options)

옵션

옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-backdrop="" 처럼 data- 에 옵션명을 덧붙히면 됩니다.

옵션명유형기본설명
backdropboolean or the string 'static'true모달 배경을 포함합니다. 그렇지 않으면, 클릭 시 모달을 닫지 않는 배경을 위해 static 를 명시하세요.
keyboardbooleantrueEsc 키가 눌렸을 때 모달을 닫습니다.
showbooleantrue초기화할 때 모달을 보여줍니다.
remotepathfalse

이 옵션은 v3.3.0 이후로 폐기예정으로 되었으며 v4 에서는 제거될 것입니다. 우리는 대신 클라이언트측 템플릿이나 data 바인드 프레임워크를 사용하거나, jQuery.load 을 호출하는 것을 추천합니다.

만약 원격 URL 이 제공된다면, 내용은 jQuery 의 load 를 통해 불러와 모달 요소에 삽입됩니다. 만약 data 속성 API 를 사용한다면, URL 을 href 속성에 명시할 수 있습니다. 이것은 아래와 같이 사용합니다:

Copy
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

메소드

.modal(options)

모달을 활성화 합니다. object 를 이용해서 옵션을 넣을 수도 있습니다.

Copy
$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

수동적으로 모달을 토글합니다. 모달이 실제로 보여지거나 숨겨지기 전에 호출자에게 리턴합니다. (말하자면 shown.bs.modal 나 hidden.bs.modal 이벤트가 발생하기 전에)

Copy
$('#myModal').modal('toggle')

.modal('show')

수동적으로 모달을 엽니다. 모달이 실제로 보여지기 전에 호출자에게 리턴합니다. (말하자면 shown.bs.modal 이벤트가 발생하기 전에)

Copy
$('#myModal').modal('show')

.modal('hide')

수동적으로 모달을 닫습니다. 모달이 실제로 숨겨지기 전에 호출자에게 리턴합니다. (말하자면 hidden.bs.modal 이벤트가 발생하기 전에)

Copy

$('#myModal').modal('hide')


이벤트

부트스트랩의 모달 클래스는 모달의 기능적인 부분을 후킹하기 위한 약간의 이벤트들을 제공합니다.

모든 모달 이벤트는 모달 자신에서 발생됩니다. (다시말해서 <div class="modal"> 에서)

이벤트설명
show.bs.modal이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 발생합니다. 만약 클릭에 의한 것이라면, 클릭된 요소는 이벤트의 relatedTarget 속성으로 가능합니다.
shown.bs.modal이 이벤트는 모달이 사용자에게 보여졌을 때 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). 만약 클릭에 의한 것이라면, 클릭된 요소는 이벤트의 relatedTarget 속성으로 가능합니다.
hide.bs.modal이 이벤트는 hide 인스턴스 메소드가 호출되는 즉시 실행됩니다.
hidden.bs.modal이 이벤트는 모달이 가려지는게 끝났을 때 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다).
loaded.bs.modal이 이벤트는 remote 옵션을 사용하는 콘텐츠를 가진 모달이 로드되었을때 발생됩니다.
Copy
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...

})

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

JS/Node.js

번호 제목 글쓴이 날짜 조회수
39 javascript [javascript] async, await를 사용하여 비동기 javascript를 동기식으로 만들자 미도어묵 02-18 939
38 javascript JavaScript 합집합, 교집합, 차집합, 대칭차 미도어묵 11-23 1,134
37 javascript jQuery 플러그인 부트스트랩의 콤포넌트(modal) 미도어묵 10-04 1,022
36 javascript Javascript 숫자에 천단위로 콤마(,) 찍기 미도어묵 08-20 732
35 javascript 함수형 프로그래밍 - 함수형으로 전환 미도어묵 08-09 791
34 Node.js nodejs & api call example 미도어묵 06-25 756
33 javascript jQuery 핸드폰 번호 체크하기 미도어묵 06-25 779
32 Node.js Node.js 업그레이드 미도어묵 04-23 695
31 Node.js node.js cross 도메인 header 처리 미도어묵 03-12 750
30 javascript hls.js 및 데모 미도어묵 02-22 744
29 Node.js node.js memcached_guide 미도어묵 01-02 746
28 Node.js clustering node + socket.io + redis 사용법 미도어묵 09-29 1,424
27 javascript script sample 예제 관리자 09-20 757
26 Node.js 커넥션 연결 확인 관리자 09-01 702
25 javascript [문법] [TypeScript] Electron + Vue.js 예제 관리자 07-24 995
24 javascript 웹 풀스택 입문을 위한 약 500페이지 분량의 교재 관리자 07-11 835
23 javascript [TypeScript] 타입스크립트 기초 세미나 자료 관리자 06-10 810
22 javascript javascript 함수 지향 관리자 04-08 738
21 Node.js Node.js 로 웹 사이트 데이터 가져오기 관리자 04-06 768
20 Node.js [MongoDB] Application / Mongoose를 이용하여 간단한 채팅 프로그램 개발 관리자 03-30 810