# PopMan ## 💬 [![Build Status](https://travis-ci.org/sj-js/popman.svg?branch=master)](https://travis-ci.org/sj-js/popman) [![All Download](https://img.shields.io/github/downloads/sj-js/popman/total.svg)](https://github.com/sj-js/popman/releases) [![Release](https://img.shields.io/github/release/sj-js/popman.svg)](https://github.com/sj-js/popman/releases) [![License](https://img.shields.io/github/license/sj-js/popman.svg)](https://github.com/sj-js/popman/releases) - 새 창(window)을 띄우지 않고 특정정보를 부각시킬 수 있습니다. - ✨ Source: https://github.com/sj-js/popman - ✨ Document: https://sj-js.github.io/sj-js/popman ## Index *@* **order** *@* ``` - PopMan - New/Pop/Close - Expression - Alert - Confirm - Loading - Preview - Focus - Theme - Event - Functions - Example ``` ## 1. Getting Started ### 1-1. How to load? - Browser ```html ``` *@* *+prefix* *x* *@* ```html ``` - ES6+ ```bash npm i @sj-js/popman ``` ```js const PopMan = require('@sj-js/popman'); const popman = new PopMan(); ``` ### 1-2. Simple Example For convenience, 1-1 code, which loads and creates a Library in the example, is omitted. ##### Exapmle - popman.pop() with script 1. `popman.new({OPTIONS})`로 POP Element를 등록합니다. ```js popman.new({ id:'pop-test', //Pop Element ID exp:'50%/90%', //Width and Height content: 'This is contents.' }); ``` 2. `popman.pop('Element ID')`로 POP Element를 호출합니다. ```js popman.pop('pop-test'); ``` 3. 👨‍💻 *@* *!* *@* ```html Hello Popman

TEST

``` ##### Exapmle - popman.pop() with template 1. Pop Element에 `data-pop`속성을 설정합니다. ```html

Pop contents with template

``` 2. `popman.detect()`를 사용하면 **data-pop** 속성을 가진 element가 등록됩니다. ```js popman.detect(); ``` 3. `popman.pop('ID')`를 호출하면 화면에 표시됩니다. ```js popman.pop('pop-test'); ``` 4. 👨‍💻 *@* *!* *@* ```html

TEST

``` ##### Exapmle - popman.alert() - 👨‍💻 *@* *!* *@* ```html Hello Popman - Alert ``` ##### Exapmle - popman.confirm() - 👨‍💻 *@* *!* *@* ```html Hello PopMan - Confirm ``` ##### Exapmle - popman.loading() - 👨‍💻 *@* *!* *@* ```html Hello Popman- Loading ```