nice-popup

Nice PopUp

Customizable script for displaying images or inline content.

N.B. This is a beta version!

Install

1. Install package by command npm install nice-popup or yarn add nice-popup
2. Import styles to your .css @import '~nice-popup/dist/app.css';.

Usage

import {NicePopup} from 'nice-popup';

new NicePopup({
    showArrows: true,
    mouseAdditionalButtons: true,
    keyboard: true
});

Examples

1. Gallery.

Just add data-nice="gallery" attribute to your links.

<a data-nice="gallery" href="pic1.jpg">
   <img src="pic1.jpg">
</a>
<a data-nice="gallery" href="pic2.jpg">
   <img src="pic2.jpg">
</a>

2. Inline content.

Add data-nice="inline" to your link and set href attribute.

<a data-nice="inline" href="#hiddenContent">Open inline content</a>
<div id="hiddenContent" style="display: none;">Hidden text</div>

Options