bopup

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

<div class="bopup bopup_form">
  <!-- close-button -->
  <div class="bopup-close-button"></div>
  <!-- popup inner -->
  <div class="bopup-content-wrapper">
    <!-- 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">callback form</button>

<span class="btn">callback form</span>

<div class="btn">callback form</div>

Initialize bopup

Finally, we need to initialize bopup in JS:

let popupForm = new Bopup(
  document.querySelector('.btn'),
  document.querySelector('.bopup_form')
)

css

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