PopMan
💬
- 새 창(window)을 띄우지 않고 특정정보를 부각시킬 수 있습니다.
-
✨ Source: https://github.com/sj-js/popman -
✨ Document: https://sj-js.github.io/sj-js/popman
Getting Started
-
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();
- Browser
-
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');
-
Simple Example
<!DOCTYPE html> <HTML> <head> <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> </head> <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/>', 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> </HTML>