Popup Full View Layer with JavaScript and CSS3 | popup_view

Popup view is a pure JavaScript library for creating a full-screen popup layer that uses CSS3 transitions and transitions for precise open/closed animations.

How to make use of it:

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

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

2. Create a trigger button to launch the popup.

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

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

4. Create a new popup.

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

5. Display the popup when you click the play button.

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

6. Create a full-screen 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>

7. Configure the size of the popup.

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

8. Execute the callback function after closing the popup.

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

9. Hide the popup manually.

popupView.hide(dom, hideCallback);

Fullscreen Popup Layer with JavaScript and CSS3, pop up view Plugin/Github, full screen overlay popup


See Demo And Download

Official Website(tedshd): Click Here

This superior jQuery/javascript plugin is developed by tedshd. For extra Advanced Usage, please go to the official website.

Share