Create Custom Browser Popup Window With JavaScript – popup_window.js

Preview:

Description:

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

How to use 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 webpage to be displayed in the popup window.

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

3. Open a new popup window.

win.open();

4. Close the popup window.

win.close();

5. Close the popup window silently.

win.closeSilently();

6. It also supports form based popup windows.

<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. Available options to customize the popup window.

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
      },
});