popup-es

    0.3.0 • Public • Published

    popup-es

    Lightweight custom modal that works independently of framework.

    Stage

    Installation

    This is still under development but feel free to test it and use on your projects.To install this packagevia npm,
    run npm install popup-es or via yarn yarn add popup-es --dev. Check the develop branch for the latest features and updates.

    Breaking Change

    The project is now using babel-preset-env instead of babel-preset-2015

    How To use

    You can now use the es6 import to import this package to your project . By the time of writing, transpiling ES6 codes to ES5 inside node_modules/ is not enabled by default, we forced the transpilation using browserify, babelify and babel-preset-es2015 plugin as a temporary solution.Please read this FAQ for more info.

    CSS

    Put inside the head of your html

     <link rel="stylesheet" type="text/css" href="path/to/node_modules/popup-es/dist/src/css/popup-es.min.css">

    If you do not want additional external css, you may copy the content of src/css/popup-es.css and paste it right to your stylesheet.

    HTML

    You can place this modal anywhere in the body of your html pages and this will stay hidden untill the data-popup-toggle is press. We recommend the use of HTML5 <dialog> element but you can still use a regular <div>

    <dialog id="modal" data-popup="fade">
        <div class="content">
            <!--close button-->
            <a href="#" data-popup-toggle="close">x</a>
            <div class="header"></div>
            <div class="body"></div>
        </div>
    </dialog>   
     
    <!--open button-->
    <menu>
        <a href="#" data-target="#modal" data-popup-toggle="open">Popup</a>
    </menu>

    Javascript

    import Popup  from 'popup-es'
     
    //create a popup instance
    let PopupInstance=new Popup()

    Popup functions

    • element.show() Opens the target popup
    • element.close() Close the target popup
    • PopupInstance.closeAll() Close all the popup instance
    • PopupInstance.close([]) [querySelector. . .] Close all popups specified in close params

    Popup attributes

    • data-popup [fade]
      Initialize popup box. Specify a value of "fade" to have a fade effect when you open or close the popup. You may change the 0.2s default timming by replacing the value of *[data-popup="fade"] in popup-es.css

    • data-popup-toggle [open | close] Opens or Closed the popup box.

    • data-target The popup you want to open. This must be use with data-popup-toggle="open"

    Direct Calls

    In case you need to open/close popup inside your function, you can make a direct call for the following:

    document.getElementById('modal').open() // open
    document.getElementById('modal').close() // close

    Promise

    You can use a callback in closing multiple modal let PopupInstance=new Popup()

    • PopupInstance.close([]).then(e=>{ //some func; })
    • PopupInstance.closeAll().then(e=>{ //some func; })

    Customizing Popup

    popup-es is designed to work without JQuery or any other similar frameworks. This will give more freedom to the developer to design their popups on their own.They just need to add data-role="none" attribute in the .content to ignore the default css before applying their custom styling.

    For Bugs, enhancement , or feature request, please submit a ticket here

    Install

    npm i popup-es

    DownloadsWeekly Downloads

    18

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • jkga