Popup

Popups are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Contents
Usage
Footer bar
- with single button
- With tab bar
Animation
- Zoom
- Slide-up
- Fall
- Flip
Options
Methods
Events
응용방법
- Varying popup content based on trigger button

Usage

모달은 요구에 따라 data 속성이나 자바스크립트를 통해 숨겨진 콘텐츠를 토글 합니다. The popup plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .popup-open to the <body> to override default scrolling behavior and generates a .popup-backdrop to provide a click area for dismissing shown popups when clicking outside the popup.

Static example

A rendered popup with title, set of actions in the header and content.

<!-- Popup -->
<div id="myPopup" class="popup zoom">
  <div class="popup-content">
    <header class="bar bar-nav">
      <a class="icon icon-close pull-right" data-dismiss="popup" role="button"></a>
      <h1 class="title">Popup</h1>
    </header>
    <div class="content">
      <p class="content-padded">The contents of my popup go here.</p>
    </div>
  </div>
</div>

Via data attributes

Activate a popup without writing JavaScript. Set data-toggle="popup" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific popup to toggle.

Button trigger type

<button type="button" data-toggle="popup" data-target="#myPopup">
  Launch popup
</button>

Link trigger type

<a href="#myPopup" data-toggle="popup" >
  Launch popup
</a>

Via JavaScript

Call a popup with id myPopup with a single line of JavaScript:

$('#myPopup').popup('show')

Multiple open popups not supported

Be sure not to open a popup while another is still visible. Showing more than one popup at a time requires custom code.

Always try to place a popup’s HTML code in a top-level position in your document to avoid other components affecting the popup’s appearance and/or functionality.

Mobile device caveats

There are some caveats regarding using popups on mobile devices. See our browser support docs for details.

<div id="myPopup" class="popup zoom">
  <div class="popup-content">
    <header class="bar bar-nav">
      <h1 class="title">with buttons</h1>
    </header>
    <nav class="bar bar-standard bar-footer">
      <div class="row">
        <div class="col-xs-6">
          <button type="button" class="btn btn-secondary btn-block">Cancel</button>
        </div>
        <div class="col-xs-6 p-l-0">
          <button type="button" class="btn btn-primary btn-block">OK</button>
        </div>
      </div>
    </nav>
    <div class="content">
      <div class="p-a-3 text-xs-center">..</div>
    </div>
  </div>
</div>

with single button

<div id="myPopup" class="popup zoom">
  <div class="popup-content">
    <header class="bar bar-nav">
      <h1 class="title">with-single-button</h1>
    </header>
    <nav class="bar bar-standard bar-footer">
      <button type="button" class="btn btn-primary btn-block">OK</button>
    </nav>
    <div class="content">
      <div class="p-a-3 text-xs-center">..</div>
    </div>
  </div>
</div>

With tab bar

<div id="myPopup" class="popup zoom">
  <div class="popup-content">
    <header class="bar bar-nav">
      <h1 class="title">with buttons</h1>
    </header>
    <nav class="bar bar-tab">
      <a class="tab-item bg-secondary" role="button">
        Cancel
      </a>
      <a class="tab-item bg-primary" role="button">
        OK
      </a>
    </nav>
    <div class="content">
      <div class="p-a-3 text-xs-center">..</div>
    </div>
  </div>
</div>

Animation

팝업이 호출될 때, 에니메이션 효과를 적용합니다. 지정된 값은 팝업 컨테이너에 class 에 적용되며, 미 지정시 애니메이션 효과가 사라집니다.

Zoom

<!-- popup -->
<div id="myPopup" class="popup zoom">
...
</div>

Slide-up

<!-- popup -->
<div id="myPopup" class="popup slide-up">
...
</div>

Fall

<!-- popup -->
<div id="myPopup" class="popup fall">
...
</div>

Flip

<!-- popup -->
<div id="myPopup" class="popup flip">
...
</div>

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-history="". 옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-selector=”” 처럼 data- 에 옵션명을 덧붙히면 됩니다.

Name	Type	Default	Description
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` 해야 할 경우 사용하면 됩니다.
backdrop	boolean or the string	true	배경을 포함합니다. 팝업을 닫지 않는 배경이 필요할 경우 `static` 를 명시하세요.

Title

용도 : 팝업의 타이틀과 브라우저의 타이틀을 동적으로 변경할 수 있습니다.
유형 : string
기본값 : null
적용방법 : data-title="값" 으로 값을 전달하고 출력을 원하는 엘리먼트에 data-role="title" 로 받아서 출력합니다.

Via data attributes

<button ... data-title="My title">Launch demo popup </button>

Via JavaScript

$(".btn").tap(function(){
  $("#myPopup").popup({
    title: 'My title'
  });
});

전달된 타이틀 값은 모달 내부에 data-role="title"이 적용된 요소에 출력됩니다.

<!-- popup -->
...
<h1 class="title" data-role="title"></h1>
...

URL

용도 : 팝업 호출시 URL을 지정 또는 변경할 수 있습니다.
유형 : string
기본값 : null
유의사항 : 값이 없는 경우 # (기본값) 이 적용되며 history 옵션이 true 인 경우만 작동됩니다.

Via data attributes

<button data-toggle='popup' data-url='값'>Launch demo popup </button>

Via JavaScript

$('.btn').tap(function(){
  $("#myPopup").popup({
    url :'값'
  });
});

History

용도 : 팝업호출 시 window.history 객체에 기록되어 스마트폰의 back 버튼을 사용해서 팝업을 닫을 수 있게 해줍니다.
유형 : boolean
기본값 : ture

Via data attributes

<button data-toggle="popup" data-history="false">Launch demo popup </button>

Via JavaScript

$(".btn").tap(function(){
  $("#myPopup").popup({
    history :'false'
  });
});

history가 기록되지 않은 모달을 닫을 때는 data-dismiss="popup" 을 사용합니다.

<!-- popup -->
...
<a class="icon icon-close pull-right" data-dismiss="popup"></a>
...

Template

Via data attributes

<button  
  data-toggle="popup"
  data-target="#myPopup"
  data-template="./template/01.html"
  data-title=".."
  data-content="..">
  Launch demo popup
</button>

Via JavaScript

$('.btn').tap(function(){
  $('#myPopup').popup({
    title: '..',
    content: '..',
    template: './template/01.html'
  });
});

Backdrop

용도 : 팝업 호출시 배경을 제어합니다.
유형 : boolean 또는 string ( true , false , static )
기본값 : true

False Backdrop

Via data attributes

<button data-toggle="popup" data-backdrop="false">

Via JavaScript

$(‘#foo’).popup({
    backdrop :'false'
});

Static Backdrop with Animation

specify static for a backdrop which doesn’t close the popup on tap.

Via data attributes

<button data-toggle="popup" data-backdrop="static" data-history="false">

or Via JavaScript

$(‘#foo’).popup({
    backdrop :'static',
    history :'false'
});

Methods

`.popup(options)`

Activates your content as a popup. Accepts an optional options object.

$('#myPopup').popup({
  title : ‘My title’
})

`.popup('toggle')`

Manually toggles a popup. Returns to the caller before the popup has actually been shown or hidden (i.e. before the shown.rc.popup or hidden.rc.popup event occurs).

$('#myPopup').popup('toggle')

`.popup('show')`

Manually opens a popup. Returns to the caller before the popup has actually been shown (i.e. before the shown.rc.popup event occurs).

$('#myPopup').popup('show')

`.popup('hide')`

Manually hides a popup. Returns to the caller before the popup has actually been hidden (i.e. before the hidden.rc.popup event occurs).

$('#myPopup').popup('hide')

Events

Bootstrap’s popup class exposes a few events for hooking into popup functionality. All popup events are fired at the popup itself (i.e. at the <div class="popup">).

Event Type	Description
show.rc.popup	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
shown.rc.popup	This event is fired when the popup has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
hide.rc.popup	This event is fired immediately when the `hide` instance method has been called.
hidden.rc.popup	This event is fired when the popup has finished being hidden from the user (will wait for CSS transitions to complete).
loaded.rc.popup	data-template 값으로 정해진 원격 마크업이 load 된 후 실행되는 이벤트

`show.rc.popup`

This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

$('#myPopup').on('show.rc.popup', function () {
  $('#myInput').focus()
})

`shown.rc.popup`

This event is fired when the popup has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap popups. To achieve the same effect, use some custom JavaScript:

$('#myPopup').on('shown.rc.popup', function () {
  $('#myInput').focus()
})

`hide.rc.popup`

This event is fired immediately when the hide instance method has been called.

$('#myPopup').on('hide.rc.popup', function (e) {
  // do something...
})

`hidden.rc.popup`

This event is fired when the popup has finished being hidden from the user (will wait for CSS transitions to complete).

$('#myPopup').on('hidden.rc.popup', function (e) {
  // do something...
})

`loaded.rc.popup`

data-template 값으로 정해진 원격 마크업이 load 된 후 실행되는 이벤트

$('#myPopup').on('loaded.rc.popup', function (e) {
  // do something...
})

응용방법

Have a bunch of buttons that all trigger the same popup, just with slightly different contents? Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the popup depending on which button was clicked. See the Popup Events docs for details on relatedTarget. 거의 같은 모달을 작동시키는 몇개의 버튼을 가지고 싶으세요? 버튼이 터치 됨에 따라 달라지는 내용을 위해서 event.relatedTarget 와 HTML data-* 속성을 사용하세요. relatedTarget 에 자세한 것은 팝업 이벤트 문서를 보세요

$('#examplePopup').on('show.rc.popup', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the popup
  var recipient = button.data('whatever') // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the popup's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var popup = $(this)
    popup.find('.title').text('New message to ' + recipient)
    popup.find('.content input').val(recipient)
})

Components

Popup

Contents

Usage

Static example

Via data attributes

Via JavaScript

Multiple open popups not supported

Popup markup placement

Mobile device caveats

Footer bar

with single button

With tab bar

Animation

Zoom

Slide-up

Fall

Flip

Options

Title

URL

History

Template

Backdrop

False Backdrop

Static Backdrop with Animation

Methods

.popup(options)

.popup('toggle')

.popup('show')

.popup('hide')

Events

show.rc.popup

shown.rc.popup

hide.rc.popup

hidden.rc.popup

loaded.rc.popup

응용방법

Varying popup content based on trigger button

`.popup(options)`

`.popup('toggle')`

`.popup('show')`

`.popup('hide')`

`show.rc.popup`

`shown.rc.popup`

`hide.rc.popup`

`hidden.rc.popup`

`loaded.rc.popup`