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:

let child = new BrowserWindow({
        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:

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

  document.getElementById("cancel-btn").addEventListener("click", function (e) {
       var window = 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.