Javascript Library to Control Popup in Web Browser

popupwindow.js is a JavaScript library for programmatically creating, opening, and closing browser popup windows.

How to make use of it:

1. Download and import the popup_window.js JavaScript library.

<script src="popup_window.js"></script>

2. Create a new instance and specify the path to the web page to be displayed in the popup.

const win = new PopupWindow({
      url: '/path/to/url/'
});

3. Open a new popup.

win.open();

4. Close the popup.

win.close();

5. Silently close the popup.

win.closeSilently();

6. It also supports form-based popups.

<form name="form_demo" method="GET">
  <ul>
    <li>
      <section>
        <label for="text-data1">Data1</label>
        <input id="text-data1" type="text" name="data1" value="defaultValue1">
      </section>
    </li>
    <li>
      <section>
        <label for="text-data2">Data2</label>
        <input id="text-data2" type="text" name="data2" value="defaultValue2">
      </section>
    </li>
  </ul>
</form>
const win = new PopupWindow({

      // the form
      form: document.form_demo,

      // action attribute of the form
      url: url, 

      // name of the opened window
      name: 'demo', 
      
});

7. Options available to customize the popup.

const popupClosedEventWatchingInterval = 500; // ms
const moduleName = 'PopupWindow';
const defaultUrl = 'about:blank';
const features = {
  width: 500, // px
  height: 500, // px
  toolbar: false, // no
  menubar: false, // no
  scrollbars: true, // yes
  resizable: false, // no
  location: false, // no
  directories: false, // no
  status: false, // no
};

8. Callback functions.

const win = new PopupWindow({
      url: '/path/to/url/',
      onBeforeOpen: function() {
        // do something
      },
      onAfterOpen: function() {
        // do something
      },
      onAfterClose: function() {
        // do something
      },
});

 


See Demo And Download

 

Official Website(niceman114): Click Here

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

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…