Fullscreen Popup Layer with JavaScript and CSS3 – popup_view

Category: Javascript , Modal & Popup | October 23, 2015
Author: tedshd
Views Total: 3,614
Official Page: Go to website
Last Update: October 23, 2015
License: MIT

Preview:

Fullscreen Popup Layer with JavaScript and CSS3 – popup_view

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_view.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.

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

Add your custom content to the popup.

<div id="popup_wrapper" class="pop_up popup_hide">
  <h1>This is a popup</h1>
  <div class="pop_up_close"></div>
</div>

Create a new popup instance.

var popupView = new popup();

Display the popup when you click on the trigger button.

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

You Might Be Interested In:


Leave a Reply