How to disable or make inactive Browser Window in Github Electron Atom

Question

I have 2 BrowserWindow(mainWindow,secondaryWindow) instances in my electron application.There is a button in the first window(mainWindow) which when clicked would open the other window(secondaryWindow).

Now my issue is that , I dont want the users to be able to click anything on the mainWindow until the secondaryWindow is closed.

The closest i could get was to use mainWindow.hide().This just completely hides the mainWindow.What i want is for users to still see the mainWindow while the secondaryWindow is active.But while secondaryWindow is active mainWindow should be disabled/inactive.

Any suggestions ???

Answer 1

You can use the parent/child concept to disable the parent while the child is open:

let top = new BrowserWindow()
let child = new BrowserWindow({parent: top})

You can also extend the concept to full modal windows as follows:

let child = new BrowserWindow({parent: top, modal: true, show: false})
child.loadURL('https://github.com')
child.once('ready-to-show', () => {
  child.show()
})

Answer 2

Couldn't get @Jens Habegger's solution to work for me. Since I'm using a bootstrap + jquery style application, I wanted to display a backdrop to prevent interaction but still see the content. This let's the user visually know the window is disabled for input.

...
mainWindow.webContents.executeJavaScript("$('<div class=\"modal-backdrop\" style=\"opacity:0.5 !important;\"></div>').appendTo(document.body);");

modal.on('close',function() {
  mainWindow.webContents.executeJavaScript("$(\".modal-backdrop\").remove();");
});

modal.show();