Create Custom Browser Popup Window With JavaScript – popup_window.js

Category: Modal & Popup | October 2, 2021
Views Total:329 views
Official Page:Go to website
Last Update:October 2, 2021


Create Custom Browser Popup Window With JavaScript – popup_window.js


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

4. Close the popup window.


5. Close the popup window silently.


6. It also supports form based popup windows.

<form name="form_demo" method="GET">
        <label for="text-data1">Data1</label>
        <input id="text-data1" type="text" name="data1" value="defaultValue1">
        <label for="text-data2">Data2</label>
        <input id="text-data2" type="text" name="data2" value="defaultValue2">
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

You Might Be Interested In:

Leave a Reply