Fullscreen Popup Layer with JavaScript and CSS3 – popup_view

Preview:

Description:

popup_view is a pure JavaScript library for creating a fullscreen popup layer that uses CSS3 transitions and transforms for subtle open / close animations.

How to use it:

Load the popup.css CSS file for basic popup styles and animation rules.

<link href="css/popup_view.css" rel="stylesheet">

Create a trigger button to launch the popup. OPTIONAL.

<button id="trigger-button">Click me</button>

Add your custom content to the popup.

<div id="popup_wrapper" class="popup popup_hide">
  <section class="popup_container">
    <div class="popup_header"></div>
    <div class="popup_content"></div>
    <div class="popup_footer"></div>
  </section>
  <div class="popup_close"></div>
</div>

Create a new popup instance.

var popupView = new popup({
    dom: document.querySelector('#popup_wrapper')
});

Display the popup when you click on the trigger button.

document.querySelector('#trigger-button').addEventListener('click', function () {
  popupView.show();
});

Create a fullscreen popup using the popup_full class.

<div id="popup_wrapper" class="popup_full popup_hide">
  <section class="popup_container">
    <div class="popup_header"></div>
    <div class="popup_content"></div>
    <div class="popup_footer"></div>
  </section>
  <div class="popup_close"></div>
</div>

Config the size of the popup.

var popupView = new popup({ 
    dom: document.querySelector('#popup_wrapper'),
    width: '300px',
    height: '300px',
    minWidth: '300px',
    minHeight: '300px'
});

Execute a callback function after the popup is closed.

var popupView = new popup({ 
    dom: document.querySelector('#popup_wrapper'),
    dosomethingClose: function(dom) {
      console.log('show popup dom', dom)
    }
});

Hide the popup manually.

popupView.hide(dom, hideCallback);

Changelog:

10/28/2021

• Update popup view function add browser back close & mask colse disable.

09/17/2021

• JS update

02/25/2020

• Add max width & max height config.

02/06/2020

• Update close margin.

01/06/2020

• Added custom scrollbar

09/23/2019

• Styles updated