bopup

Demo

https://dmitriy-line.github.io/bopup-demo/

Component to create a popup:

♦ suitable for

• Pop-up forms
• Privacy Policy
• pop-up gallerys

Install from NPM.

npm i bopup

Import js

import bopup from "../../node_modules/bopup/dist/js/bopup.js";

Import css

@import '../../node_modules/bopup/dist/css/bopup.css';

Add bopup HTML Layout

<!-- popup container -->
<div class="bopup">
  <!-- close-popup-button -->
  <div class="bopup-close-button"></div>
  <!-- popup wrapper -->
  <div class="bopup-content-wrapper">
    <!--popup content -->
    <!-- any block or content -->
  </div>
</div>

Several popups

To create several popups, just add an extra class to the <div class="bopup">,
for example <div class="bopup bopup_form">

Add any content in to the <div class="bopup-content-wrapper">

create element that will trigger the popup.

Example

<button class="btn">button</button>

<span class="span">span</span>

<div class="div">div</div>

Initialize bopup

Finally, you need to initialize bopup in JS:

bopup(document.querySelector('.btn'), document.querySelector('.bopup'));

css

.bopup-content-wrapper {
  background: #fff;
}