Custom HTML Dialog in Electron

Question

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 allow custom HTML.

I do not wish to use native HTML dialogs (dialog) tag as it does not 'blend in' with the user interface.

Any help would be much appreciated. Thanks!

Answer 1

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

Answer 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>