Popup

팝업(Popup)은 요소 위나 옆에 툴팁처럼 작은 콘텐츠를 표시하는 컴포넌트예요. 요소에 마우스를 올렸을 때 설명을 보여주거나, 복잡한 HTML 콘텐츠를 표시하는 데 사용합니다. Javascript 없이 쓸 수 있는 CSS 전용 툴팁도 지원해요.

출처: 문서

본문

Types

Javascript

Popup은 전체 기능을 갖춘 javascript 버전과, 기능이 제한된 CSS 전용 버전을 모두 포함해요. CSS 전용 버전은 팝업이 많은 페이지나 React, Meteor 같은 라이브러리에서 DOM 라이프사이클을 처리하지 않으려는 페이지에 유용할 수 있어요.

Popup

요소는 나타날 팝업 콘텐츠를 지정할 수 있어요.

Titled

요소는 제목이 있는 팝업 콘텐츠를 지정할 수 있어요.

HTML

요소는 팝업용 HTML을 지정할 수 있어요.

User Rating">
        
          
        
        
          My Neighbor Totoro
          
            Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by magical spirits.
          
        
        
          
            
            Queue
          
          
            
            Watch

Pre-Existing

요소는 페이지에 이미 포함된 팝업을 표시할 수 있어요.

Watchmen
          
            In a gritty and alternate 1985 the glory days of costumed vigilantes have been brought to a close by a government crackdown, but after one of the masked veterans is brutally murdered an investigation into the killer is initiated.
          
        
        
          
            
            Queue
          
          
            
            Watch
          
        
      
      
        User Rating

No Javascript

Tooltip

요소는 data-tooltip 속성을 통해 javascript 없이 나타날 수 있는 간단한 툴팁을 지정할 수 있어요. 툴팁을 inverted로 표시하려면 data-inverted 속성도 추가하세요.

Tooltips use an element's :before and :after pseudo classes. Elements like icon that already use these classes for styling will need to have the tooltips to a wrapping element, like a button, or a span to make sure tooltips work correctly.

툴팁은 요소의 :before와 :after 의사 클래스를 사용해요. 아이콘처럼 이미 이런 클래스를 스타일링에 사용하는 요소는, 툴팁이 제대로 동작하도록 버튼이나 span 같은 감싸는 요소에 툴팁을 넣어야 해요.

Tooltip Position

툴팁은 data-position 속성을 통해 요소를 기준으로 특정 위치에 표시될 수 있어요.

Top Left
      
      
        Top Center
      
      
        Top Right
      
      
      
        Bottom Left
      
      
        Bottom Center
      
      
        Bottom Right
      
      
      
        Right Center
      
      
        Left Center

Top Left
      
      
        Top Center
      
      
        Top Right
      
      
      
        Bottom Left
      
      
        Bottom Center
      
      
        Bottom Right
      
      
      
        Right Center
      
      
        Left Center

Tooltip Size

툴팁은 data-variation 속성을 통해 크기가 달라질 수 있어요.

Basic Tooltip

툴팁은 더 기본적인 서식을 제공할 수 있어요.

Basic
      
      
        Tiny Basic
      
      
        Basic
      
      
        Tiny Basic

Multiline Tooltip

툴팁은 HTML 코드의 미리 정의된 줄바꿈과 data-variation 속성에 multiline을 추가해 여러 줄을 표시할 수 있어요.

non breaking spaces have to use a non visible character like U+A0 (not &nbsp;!) (see https://qwerty.dev/whitespace)
          newlines to break lines / trigger a tooltip newline
        
      
      
    Multiline tooltip

라는 줄 바꿈 문자와 U+A0 같은 안 보이는 non-breaking 공백 문자를 사용해야 해요 (자세한 내용은 https://qwerty.dev/whitespace 참고).

Visible Tooltip

툴팁은 data-variation 속성에 visible을 추가해 항상 표시되도록 할 수 있어요.

Important Button

Colored Tooltip

툴팁은 data-variation 속성을 통해 다양한 색상을 가질 수 있어요.

Red
            Orange
            Yellow
            Olive
            Green
            Teal
            Blue
            Violet
            Purple
            Pink
            Brown
            Grey
            Black

States

Loading

팝업은 콘텐츠가 로딩 중임을 보여줄 수 있어요.

로더는 팝업의 색상을 상속해요.

Variations

Basic

팝업은 더 기본적인 서식을 제공할 수 있어요.

Width

팝업은 더 긴 콘텐츠를 허용하도록 여분으로 넓어질 수 있어요.

Usually a popup inherits its default width by its parent container. This could lead into situations where popups appear too small, even when the wide or very wide class is given.To overcome this, you can force a fixed width by also adding the fixed class to the popup.You can also use this feature on css only tooltips by adding the fixed class to the data-variation attribute of your tooltip

보통 팝업은 부모 컨테이너의 기본 너비를 상속해요. 이로 인해 wide나 very wide 클래스를 줘도 팝업이 너무 작게 보일 수 있어요. 이를 해결하려면 팝업에 fixed 클래스를 추가해 고정 너비를 강제할 수 있어요. CSS 전용 툴팁에도 툴팁의 data-variation 속성에 fixed 클래스를 추가해 이 기능을 사용할 수 있어요.

Fluid

플루이드(fluid) 팝업은 오프셋 컨테이너의 전체 너비를 차지해요.

Show fluid popup
      
        
          1
          2
          3
          4

Size

팝업은 크기가 달라질 수 있어요.

Flowing

플로잉(flowing) 팝업은 최대 너비가 없고 콘텐츠에 맞춰 계속 흐를 수 있어요.

Show flowing popup
      
        
          
            
            
            Choose
          
          
            
            
            Choose
          
          
            
            
            Choose

Inverted

팝업은 색상이 반전될 수 있어요.

Colored

팝업은 다양한 색상을 가질 수 있어요.

Red
            Red

            Orange
            Orange

            Yellow
            Yellow

            Olive
            Olive

            Green
            Green

            Teal
            Teal

            Blue
            Blue

            Violet
            Violet

            Purple
            Purple

            Pink
            Pink

            Brown
            Brown

            Grey
            Grey

            Black
            Black

Usage

Initializing A Popup

팝업은 활성화 요소(activating element)에서 초기화돼요.

$('.activating.element')
        .popup()
      ;

Using a Pre-existing Popup

기존 팝업을 사용하면 팝업 안에 복잡한 HTML을 포함할 수 있어요. 페이지 로드 시 팝업을 활성화 요소의 인접한 형제 요소로 포함하면 자동으로 찾을 수 있어요.

$('.button')
          .popup({
            inline: true
          })
        ;
      
      
        Activator
        
          Custom Header
          Click Me

Using a Pre-existing Popup Anywhere

팝업 요소를 형제 요소로 포함할 수 없다면, 팝업을 가져올 커스텀 선택자를 지정할 수 있어요.

$('.button')
          .popup({
            popup: '.special.popup'
          })
        ;

Specifying Content In Metadata

Frequently used settings like, title, content, HTML, or offset or variation, can be included in HTML metadata
      
        
        Popups can specify content in three ways:
          
            Using HTML title attribute
            Using data-content attribute
            Using data-html for specific HTML
            Using the content property in the initialization of the popup
          
          Popups can also specify some other frequently used settings using metadata
          
            data-variation: the popup variation to use 
            data-offset: a pixel offset correction for popup
            data-position: the side to position popup on

팝업은 콘텐츠를 세 가지 방식으로 지정할 수 있어요:

HTML title 속성 사용
data-content 속성 사용
특정 HTML에 data-html 사용
팝업 초기화에서 content 속성 사용

또한 팝업은 다른 자주 쓰는 설정도 메타데이터로 지정할 수 있어요:

data-variation: 사용할 팝업 변형
data-offset: 팝업의 픽셀 오프셋 보정
data-position: 팝업을 배치할 측면

Specifying Content In Javascript

$('.ui.popup')
        .popup({
          title   : 'Popup Title',
          content : 'Hello I am a popup'
        })
      ;

Behavior

다음 모든 행동들은 다음 구문을 사용해 호출할 수 있어요:

.ui.your.element')
      .popup('behavior name', argumentOne, argumentTwo)
    ;

행동	설명
`show`	팝업을 보여줘요.
`hide`	팝업을 숨겨요.
`hide all`	페이지의 보이는 모든 팝업을 숨겨요.
`get popup`	현재 팝업 DOM 요소를 반환해요.
`change content(html)`	현재 팝업 콘텐츠를 변경해요.
`toggle`	팝업의 표시 여부를 토글해요.
`is visible`	팝업이 표시 중인지 반환해요.
`is hidden`	팝업이 숨겨졌는지 반환해요.
`exists`	팝업이 생성되어 페이지에 삽입되었는지 반환해요.
`reposition`	콘텐츠 크기가 바뀔 때 팝업을 조정해요 (중앙 정렬 팝업에만 필요).
`set position(position)`	팝업을 재배치해요.
`destroy`	팝업을 페이지에서 제거하고 모든 이벤트를 제거해요.
`remove popup`	팝업을 페이지에서 제거해요.
`set loading`	팝업을 로딩 스피너를 표시하고 콘텐츠를 비활성화하는 로딩 상태로 설정해요.
`remove loading`	팝업에서 로딩 상태를 제거해요.

Examples

Specifying Popup Boundaries

Popup에는 이제 새 설정 boundary가 포함되어, 팝업이 다른 섹션의 경계를 벗어나지 않도록 지정할 수 있어요. 복잡한 패널 레이아웃에서 유용할 수 있어요.

$('.boundary.example .button')
          .popup({
            boundary: '.boundary.example .segment'
          })
        ;
      

      
        Hover Me

Wide Popup Menu

넓은 팝업 메뉴 같은 복잡한 콘텐츠를 표시하는 더 쉬운 방법은 팝업 콘텐츠를 페이지 HTML의 기존 부분으로 두는 거예요.

$('.example .menu .browse')
        .popup({
          inline     : true,
          hoverable  : true,
          position   : 'bottom left',
          delay: {
            show: 300,
            hide: 800
          }
        })
      ;
      
      
        
          Browse
          
        
        
          
            
              
              
                Cashmere
                Linen
                Cotton
                Viscose
              
            
            
              
              
                Small
                Medium
                Large
                Plus Sizes
              
            
            
              
              
                Neutrals
                Brights
                Pastels
              
            
            
              
              
                Knitwear
                Outerwear
                Pants
                Shoes
              
            
          
        
        
          
          Checkout

Specifying a selector for a popup

팝업 콘텐츠를 다음 형제 요소로 포함할 수 없다면, 팝업 콘텐츠를 활성화 요소에 연결할 커스텀 선택자를 지정할 수도 있어요.

Using an inline popup may require specifying a min-width on your popup, if your popup content will appear outside the boundaries of its parent element.
      
      
      $('.example .custom.button')
        .popup({
          popup : $('.custom.popup'),
          on    : 'click'
        })
      ;
      
      
        Show custom popup
      
      
        I'm not on the same level as the button, but i can still be found.

인라인 팝업을 사용한다면, 팝업 콘텐츠가 부모 요소의 경계 밖에 나타날 경우 팝업에 min-width를 지정해야 할 수 있어요.

Specifying a trigger event

팝업 트리거 이벤트를 지정할 수 있어요.

$('.example .teal.button')
      .popup({
        on: 'click'
      })
    ;
    $('.example input')
      .popup({
        on: 'focus'
      })
    ;
      
      Click Me

Target Element

팝업은 자신보다 다른 대상 요소에 팝업을 표시하도록 지정할 수 있어요.

$('.test.button')
        .popup({
          position : 'right center',
          target   : '.test.image',
          title    : 'My favorite dog',
          content  : 'My favorite dog would like other dogs as much as themselves'
        })
      ;
      
      Hover Me

Inline or relative to page

팝업은 요소 바로 뒤에 삽입되거나, 페이지 body의 자식 요소로 추가될 수 있어요.

/* this will only style the popup if inline is true */
      .example .popup {
        color: #FF0000;
      }
      
      
      $('.inline.icon')
        .popup({
          inline: true
        })
      ;

Positioning

팝업은 요소의 어느 측면에든 위치할 수 있어요. 공간이 없으면 자동으로 유사한 대체 위치를 찾아 사용해요.

Specifying an offset

팝업 위치는 data-offset="value"를 사용해 offset 속성을 지정하거나 offset 설정을 통해 수동으로 조정할 수 있어요.

Transitions

팝업은 어떤 명명된 ui transition도 사용할 수 있어요.

Home

      
      
        
        
        Choose a transition
        
          Horizontal Flip
          Vertical Flip
          Fade Up
          Fade
          Scale
        
      
      
      
    $('.selection')
      .dropdown({
        onChange: function(value) {
          $('.demo.icon')
            .popup({
              transition: value
            })
            .popup('toggle')
          ;
        }
      })
    ;

팝업 동작을 구성하는 설정이에요.

설정	기본값	설명
`popup`	`false`	팝업으로 사용할 DOM 요소를 지정할 수 있어요. 미리 서식화된 팝업을 포함할 때 유용해요.
`exclusive`	`false`	이 팝업이 열릴 때 다른 모든 팝업을 숨길지 여부예요.
`movePopup`	`true`	페이지에 `popup`이 이미 존재할 때 팝업을 대상 요소와 같은 오프셋 컨테이너로 이동할지 여부예요. 사이드바처럼 `overflow:visible`이 아닌 요소 안의 팝업을 사용하려면 이 값을 `false`로 설정해야 할 수 있어요.
`observeChanges`	`true`	팝업이 `mutationObservers`를 연결해 요소가 페이지 DOM에서 제거될 때 자동으로 `destroy`를 실행할지 여부예요.
`boundary`	`window`	팝업이 이 요소의 경계를 넘으면 다른 표시 위치를 찾으려 시도해요.
`context`	`body`	팝업이 생성될 위치를 지정하는 선택자 또는 jQuery 객체예요.
`scrollContext`	`window`	이 컨텍스트의 스크롤 이벤트에서 팝업을 자동으로 숨겨요.
`jitter`	`2`	팝업이 컨텍스트 경계 밖에 나타날 수 있는 픽셀 수예요. 요소가 `context`의 가장자리에 있을 때 허용 가능한 반올림 오차를 허용해요.
`position`	`top left`	팝업이 나타날 위치예요.
`forcePosition`	`false`	주어진 `position`을 팝업이 맞는지 여부와 무관하게 사용할지 여부예요.
`inline`	`false`	팝업이 inline이면 현재 요소 옆에 생성되어 로컬 css 규칙이 적용될 수 있어요. 숨겨진 후 DOM에서 제거되지 않아요. 그렇지 않으면 팝업은 body에 추가되고 숨겨진 후 제거돼요.
`preserve`	`false`	팝업 콘텐츠를 숨긴 후 페이지에 보존해 이후 로드 시 조금 더 빨리 다시 나타나게 할지 여부예요.
`prefer`	`opposite`	팝업이 화면에 맞지 않을 때 인접(adjacent) 또는 반대(opposite) 위치를 선호하도록 `adjacent` 또는 `opposite`로 설정할 수 있어요.
`lastResort`	`false`	`false`로 설정하면 페이지에 완전히 맞지 않을 때 팝업이 나타나지 않고 오류 메시지를 생성해요. `right center` 같은 위치로 설정하면 부분적으로 화면 밖이어도 마지막 수단으로 그 위치를 사용하도록 강제해요. `true`로 설정하면 마지막으로 시도한 위치를 사용해요.
`on`	`hover`	팝업을 트리거하는 이벤트예요. `focus`, `click`, `hover`, `manual` 중 하나일 수 있어요. manual 팝업은 `$('.element').popup('show');`로 트리거해야 해요.
`delay`	`{ show: 50, hide: 70 }`	hover나 focus 시 팝업을 표시/숨기기 전의 ms 단위 지연이에요.
`transition`	`scale`	메뉴를 애니메이션할 때 사용할 명명된 트랜지션이에요. 또는 객체를 제공해 hide/show 트랜지션과 hide/show 시간을 개별 값으로 설정할 수 있어요.
`duration`	`200`	애니메이션 이벤트의 시간이에요. `transition` 설정으로 개별 hide/show 시간 값을 제공하면 이 값은 무시돼요.
`arrowPixelsFromEdge`	`20`	대상 요소가 이 값의 2배보다 작으면, 팝업 가장자리가 대상 가장자리와 일치하는 대신 대상 요소에 화살표가 중앙에 오도록 팝업이 나타나요.
`setFluidWidth`	`true`	팝업가 fluid 팝업 변형 너비를 로드 시 설정해 `width: 100%`가 패딩을 포함하지 않게 할지 여부예요.
`hoverable`	`false`	팝업이 hover 시 닫히지 않게 할지 여부예요 (팝업 내비게이션 메뉴에 유용).
`closable`	`true`	페이지를 클릭할 때 팝업을 숨길지 여부예요. `auto`는 `on: 'hover'`가 없는 팝업만 숨겨요.
`addTouchEvents`	`true`	`on: 'hover'`를 사용할 때 팝업을 트리거할 수 있도록 `touchstart` 이벤트를 추가할지 여부예요.
`hideOnScroll`	`auto`	스크롤이나 touchmove 시 팝업을 숨길지 여부예요. `auto`는 `on: 'click'`이 없는 팝업만 숨겨요. 입력 필드 안을 탭할 때 모바일 브라우저가 팝업을 닫지 않게 하려면 `false`로 설정하세요.
`target`	`false`	선택자나 jQuery 객체를 지정하면 이 요소를 기준으로 팝업이 배치될 수 있어요.
`distanceAway`	`0`	요소에서 팝업까지의 거리 오프셋이에요.
`offset`	`0`	계산된 위치에서의 픽셀 오프셋이에요.
`maxSearchDepth`	`15`	팝업이 화면에 맞지 않을 때 팝업 위치 검색을 포기하기 전의 반복 횟수예요.

Callbacks

Callbacks는 특정 행동 이후 발생할 함수를 지정해요.

콜백	매개변수	컨텍스트	설명
`onCreate`	`$module`	`$popup`	팝업 요소 생성 시, 생성된 팝업과 함께 호출돼요.
`onRemove`	`$module`	`$popup`	Popup이 DOM에서 제거되기 직전의 콜백이에요.
`onShow`	`$module`	`$popup`	팝업이 표시되기 전의 콜백이에요. 이 콜백에서 `false`를 반환하면 팝업이 표시되지 않도록 취소해요.
`onVisible`	`$module`	`$popup`	팝업이 표시된 후의 콜백이에요.
`onHide`	`$module`	`$popup`	팝업이 숨겨지기 전의 콜백이에요. 이 콜백에서 `false`를 반환하면 팝업이 숨겨지지 않도록 취소해요.
`onHidden`	`$module`	`$popup`	팝업이 숨겨진 후의 콜백이에요.
`onUnplaceable`	`$module`	`$popup`	팝업을 화면에 배치할 수 없을 때의 콜백이에요.

Content Settings

팝업 콘텐츠를 지정하는 설정이에요.

설정	설명
`variation`	사용할 팝업 변형으로, 공백 구분자로 여러 변형을 사용할 수 있어요.
`content`	표시할 콘텐츠예요.
`title`	콘텐츠와 함께 표시할 제목이에요.
`html`	미리 형식화된 title과 content 대신 표시할 HTML 콘텐츠예요.

DOM Settings

DOM 설정은 이 모듈이 DOM과 어떻게 인터페이스할지 지정해요.

설정	기본값	설명
`namespace`	`popup`	이벤트 네임스페이스예요.
`selector`	`{ popup : '.ui.popup' }`	내부적으로 사용되는 DOM 선택자예요.
`metadata`	`{ activator:'activator', content:'content', html:'html', offset:'offset', position:'position', title:'title', variation:'variation' }`	데이터를 저장하는 데 사용되는 HTML 데이터 속성이에요.
`className`	`{ active:'active', basic:'basic', animating:'animating', dropdown:'dropdown', invisible:'invisible', fluid:'fluid', loading:'loading', popup:'ui popup', position:'top left center bottom right', visible:'visible', popupVisible:'visible' }`	상태에 스타일을 연결하는 데 사용되는 클래스 이름이에요.

Debug Settings

Debug 설정은 콘솔에 대한 디버그 출력을 제어해요.

설정	기본값	설명
`name`	`Popup`	디버그 로그에 사용되는 이름이에요.
`silent`	`false`	모든 콘솔 출력을 조용히 만들어요.
`debug`	`false`	콘솔에 표준 디버그 출력을 제공해요.
`performance`	`true`	콘솔에 표준 디버그 출력을 제공해요.
`verbose`	`false`	콘솔에 보조 디버그 출력을 제공해요.
`errors`	`{ invalidPosition:'The position you specified is not a valid position', cannotPlace:'Popup does not fit within the boundaries of the viewport', method:'The method you called is not defined.', noElement:'This module requires ui {element}', notFound:'The target or popup you specified does not exist on the page' }`	오류 메시지 설정이에요.

더 알아보기 (Learn more)

팝업으로 툴팁부터 복잡한 메뉴까지 다양한 표시형 UI를 만들 수 있어요. Javascript 없이 쓸 수 있는 data-tooltip 변형도 유용해요. 배치와 경계 설정을 잘 활용해 보세요. 요소 전환 표시는 Transition 문서도 함께 참고하세요.

Popup

Popup

본문

Types

Javascript

Popup

Titled

HTML

Pre-Existing

No Javascript

Tooltip

Tooltip Position

Tooltip Size

Basic Tooltip

Multiline Tooltip

Visible Tooltip

Colored Tooltip

States

Loading

Variations

Basic

Width

Fluid

Size

Flowing

Inverted

Colored

Usage

Initializing A Popup

Using a Pre-existing Popup

Using a Pre-existing Popup Anywhere

Specifying Content In Metadata

Specifying Content In Javascript

Behavior

Examples

Specifying Popup Boundaries

Wide Popup Menu

Specifying a selector for a popup

Specifying a trigger event

Target Element

Inline or relative to page

Positioning

Specifying an offset

Transitions

Popup Settings

Callbacks

Content Settings

DOM Settings

Debug Settings

더 알아보기 (Learn more)