Electron + node.jsでモーダルウィンドウを表示する

Electron + node.jsでモーダルウィンドウを表示する

Electron + node.jsでモーダルウィンドウを表示する

BrowserWindowクラスを使用して親のウィンドウを表示します。

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    center: true,
    resizable: true,
    show: false
  })
  win.loadURL('https://yahoo.co.jp')
  win.once('ready-to-show', ()=> {
    win.show()
  })
  win.on('close',()=> {
  })
}
app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})

ready-to-showはレンダラープロセスがレンダリング完了後に発生するイベントなので、このイベント後にウィンドウを表示すればちらつきがありません。

子ウィンドウを作成

parentプロパティに親ウィンドウの変数を指定すれば子ウィンドウを表示することができます。

// 子ウィンドウのparentプロパティの値に親ウィンドウの変数を指定
const child = new BrowserWindow({ parent: win })

子ウィンドウは親ウィンドウの手前に作成され表示されます。

モーダルを作成

モーダルを作成するには親ウィンドウの指定に加えてmodal: trueを設定します。

index.js(メインプロセス)

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    center: true,
    resizable: true,
    show: false
  })
  win.loadURL('https://yahoo.co.jp')
  win.once('ready-to-show', ()=> {
    win.show()
  })
  const child = new BrowserWindow({ parent: win, modal: true, show: false }) // parentに親ウィンドウ指定
  child.show('ready-to-show', ()=> {
    child.show()
  })
}
app.whenReady().then(createWindow) // 表示
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

モーダルウィンドウの場合は親ウィンドウの操作が出来ません。