Custom Html Dialog In Electron

How (or is it even possible) to use custom HTML dialogs in Electron? I know that Electron provides certain dialogs (showMessageDialog, showErrorDialog) but these do not seem to all

Solution 1:

You can create a BrowserWindow that's modal and, if you like, frameless. See http://electron.atom.io/docs/api/browser-window/.

Solution 2:

Yes. On your parent you should have:

const { remote } = require('electron');
const { BrowserWindow } = require('electron').remote;

and then:

letchild=newBrowserWindow({parent:remote.getCurrentWindow(),modal:true,width:300,height:300,webPreferences: {
            enableRemoteModule:true,
            nodeIntegration:true
        }
    });child.loadFile('myCustomModal.html');

On myCustomModal.html remeber to include a way to close the modal! like:

<buttonid="cancel-btn">Cancel</button><script>const remote = require('electron').remote;

  document.getElementById("cancel-btn").addEventListener("click", function (e) {
       varwindow = remote.getCurrentWindow();
       window.close();
  });   

</script>

Solution 3:

As Marc Rochkind said in a previous answer, you can use modal windows in Electron.

However, I have found a small bug with modal windows which causes the parent window to flicker for a very short duration when its .show() function is called. After quite some time on Google, I found an open issue on GitHub about the same problem. After reading the comment section in the issue, and stumbling across some code snippets, I shared a hacky solution in the issue's comment section.

It does take some work to set up, but once it's done, it's really easy to port to other child windows.