Author: | tedshd |
---|---|
Views Total: | 5,943 views |
Official Page: | Go to website |
Last Update: | October 28, 2021 |
License: | MIT |
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