PopMan

💬

새 창(window)을 띄우지 않고 특정정보를 부각시킬 수 있습니다.
✨ Source: https://github.com/sj-js/popman
✨ Document: https://sj-js.github.io/sj-js/popman

Index

1. Getting Started

1-1. How to load?

Browser


  <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@sj-js/popman/dist/js/popman.min.js"></script>
  <script>
       var popman = new PopMan();
  </script>

ES6+


  npm i @sj-js/popman


  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

popman.new({OPTIONS})로 POP Element를 등록합니다.


 popman.new({
     id:'pop-test', //Pop Element ID
     exp:'50%/90%', //Width and Height
     content: 'This is contents.' 
 });

popman.pop('Element ID')로 POP Element를 호출합니다.
```
 popman.pop('pop-test');
```
👨‍💻
<body>
Hello Popman
<button onclick="popman.pop('pop-test');">POP</button>
<div id="tester">TEST</div>
</body>
<script>
popman.setup({modeTest:true});
popman.new({
id:'pop-test',
exp:'50%/90%',
closebyesc:true,
content:'This is contents. <br/><br/>',
modeAuto:true, //Open automatically
add:function(data){
document.getElementById('tester').innerHTML = 'When add';
},
pop:function(data){
document.getElementById('tester').innerHTML = 'When pop';
},
close:function(data){
document.getElementById('tester').innerHTML = 'When close';
}
});
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exapmle - popman.pop() with template

Pop Element에 data-pop속성을 설정합니다.


 <div id="pop-test" data-pop data-exp="300/200" >
     Pop contents with template
 </div>

popman.detect()를 사용하면 data-pop 속성을 가진 element가 등록됩니다.
```
 popman.detect();
```
popman.pop('ID')를 호출하면 화면에 표시됩니다.
```
 popman.pop('pop-test');
```
👨‍💻
<script>
popman.setup({modeTest:true}).detect();
</script>
<body>
<button onclick="popman.pop('pop-test');">POP</button>
<div id="pop-test" data-pop data-exp="300/200" data-closebyclickin data-mode-auto>
<br/>
<div id="divAlertMsg" style="font-size:35px; color:white; border:2px solid; background:#F08047;">
TEST
</div>
<div id="divAlert1stMsg">
TEST
</div>
</div>
</body>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exapmle - popman.alert()

👨‍💻

<body>
Hello Popman - Alert
<button onclick="alertSomething();">ALERT</button>
</body>
<script>
popman.setup({modeTest:true, alertExp:'200/100'});
function alertSomething(){
popman.alert('Alert Something', function(){
alert('Alert! Ok!');
return true;
});
}
alertSomething();
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exapmle - popman.confirm()

👨‍💻
<body>
Hello PopMan - Confirm
<button onclick="confirmSomething();">CONFIRM</button>
</body>
<script>
popman.setup({modeTest:true, confirmExp:'300/150'});
function confirmSomething(){
popman.confirm('Confirm Something',
function(){
alert('OK!');
return true;
},
function(){
alert('Cancel!');
return true;
}
);
}
confirmSomething();
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exapmle - popman.loading()

👨‍💻
<body>
Hello Popman- Loading
<button onclick="loadSomething();">LOAD</button>
</body>
<script>
popman.setup({modeTest:true, loadingExp:'80%/100'});
function loadSomething(){
popman.loading('LOADING.. Something..', function(resolve, reject){
setTimeout(function(){
resolve();
}, 2000);
});
}
loadSomething();
</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX