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

| Props | Type | Default | Description | |:------------------------|:--------|:--------|:-----------------------| | overlayColor | String |'#0f0f11'| Set overlay color | | showArrows | Boolean | true | Show right and left arrow | | arrowsPosition | String | 'top' | Set arrows position: top or side | | keyboard | Boolean | true | Allow to control by keyboard arrow keys and escape | | mouseAdditionalButtons | Boolean | true | Allow to control by mouse additional buttons | | draggable | Boolean | true | Allow to control by dragging |