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


Fullscreen Popup Layer with JavaScript and CSS3 – popup_view


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>

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 () {

You Might Be Interested In:

Leave a Reply