@xuandinhgl/simple-modal v0.0.1

Modal

A simple library to create modal.

Installation

• Install via npm or yarn:

$ npm install @xuandinhgl/simple-modal
# install with yarn
$ yarn add @xuandinhgl/simple-modal

Usage

• In a modular environment.

Javascript

import modal from '@xuandinhgl/simple-modal'

SCSS

@import "~/@xuandinhgl/simple-modal/src/scss/modal.scss";

• In browsers.

<!-- Using with button -->
<a class="btn btn-primary" href="#" data-toggle="modal" data-target="#demo-modal">Open modal</a>

<!-- Using with anchor -->
<button class="btn btn-primary" data-toggle="modal" data-target="#demo-modal">Open modal</button>

<div id="demo-modal" class="xdi-modal">
    <div class="xdi-modal__backdrop js-modal-backdrop"></div>
    <div class="xdi-modal__dialog">
        <button class="xdi-modal__close js-modal-close"></button>
        <div class="xdi-modal__inner">
            <h3>Modal title</h3>
            <p>Modal body</p>
        </div>
    </div>
</div>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        modal();
    })
</script>

If you want to add preventDefault or stopPropagation to anchor, just add data-prevent="true" data-stop="true" to html attribute.

Contribute

All contributions, big or small, are warmheartedly welcome! Please follow these steps if you want to contribute to this project.

Clone and install dependencies

git clone https://github.com/xuandinhgl/modal.git
cd modal
npm install

Build the library

# For dev
npm run dev

# For prod
npm run build

Once you're happy with the changes, commit the file and create a PR.

License

MIT © Xuan Dinh