electron-vue项目新建窗口如何弹出指定元素？

鄙人想实现electron快捷键弹出新窗口展示一个模态框。
最开始尝试新建一个自定义的html，发现无法注入模块。查询资料才知道vue默认是构建单页面应用的。
现在打算把模态框直接写进index.html，默认隐藏。在按下快捷键后只显示模态框，不显示index.html的其他内容。请问如何实现？（如果有其他更好的解决方案也请提出谢谢）

background.js部分代码：

globalShortcut.register('CommandOrControl+P', () => {
    //* **** 发送到index.html，index.html响应展示模态框 *****
    win.webContents.send('ping', 'showModal')
    newwin = new BrowserWindow({
      width: 600,
      height: 400,
      frame: true
    })
    if (process.env.WEBPACK_DEV_SERVER_URL) {
      newwin.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
      if (!process.env.IS_TEST) {
        newwin.webContents.openDevTools()
      }
    } else {
      createProtocol('app')
      newwin.loadURL('app://./index.html')
    }
    newwin.on('closed', () => { newwin = null })
  })
})

我的想法是在index.html中的ipcRenderer添加一些代码

<script>
    require('electron').ipcRenderer.on('ping', (event, message) => {
      // 隐藏其他元素，展示模态框
    })
<script>