javascript - 如何在 Electron js中创建模态？ (javascript，html，css)-6ren

javascript - 如何在 Electron js中创建模态？ (javascript，html，css)

转载作者：行者123 更新时间：2023-12-03 12:41:31

相反，我在创建模态时需要帮助。使用此视频作为引用:
https://www.youtube.com/watch?v=gLWIYk0Sd38

我遵循了本教程，但是我无法使按钮正常工作。我不知道问题出在哪里，这使我发疯。

enter image description here

我需要将他的javascript代码放在 Electron 元素的特定位置吗？帮助

Javascript

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

function createWindow () {
  // Create the browser window.
  const mainWin = new BrowserWindow({
    width: 800,
    height: 600,
    resizable:false,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  mainWin.loadFile('index.html')

  // Open the DevTools.
        //win.webContents.openDevTools()

  var menu = Menu.buildFromTemplate([
      {
          label: "Menu",
          submenu: [
              {label: 'Exit',
                accelerator: process.platform == 'darwin' ? 'Command+Q' :
                'Ctrl+Q',
                click(){
                    app.quit();
                }
            }
          ]
      },
      {
          label: 'Classes',
          submenu: [
              {label: 'Add Classes'},
              {label: 'Manage Classes'}
          ]
      },
      {
          label: 'Reply Slips',
          submenu: [
              {label: 'Add Reply Slips'},
              {label: 'Manage Reply Slips'}
          ]
      }
  ])
  Menu.setApplicationMenu(menu);

  document.getElementById('addcBtn').addEventListener('click', function(){
    document.querySelector(".bg-modal").style.display = "flex";
  });

  document.querySelector('.close').addEventListener('click', function(){
    document.querySelector(".bg-modal").style.display = "none";
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow)

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

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Reply Slip Checker</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />

    <link rel="stylesheet" href="C:\Users\Doreen Adolfo\Desktop\Personal Coding Projects\rs-checker\assets\css\main.css">
  </head>
  <body>
    <div id="header">REPLY SLIP CHECKER</div>
      <br/><br/><br/><br/><br/><br/>
    <div class="alignBtn1">
      <a href="#" id="addcBtn" class="button">ADD CLASSES</a>
    </div>
    <div class="alignBtn2">
      <button id="yourcBtn">MANAGE CLASSES</button>
    </div>

    <!-- Modal Section-->
    <div class="bg-modal">
      <div class="modal-content">
        <div class="close">+</div>

        <form>
          <input type="text" placeholder="Name">
          <input type="text" placeholder="Name">
          <a href="" class="button">Submit</a>
        </form>
      </div>
    </div>
  </body>
</html>

CSS :

body, div{ margin: 0;}
#header{
    width:100%; 
    height:50px;
    background:#1167b1;
    color: white;
    font-weight: bold;
    font-size: 500;
    font-family: lucida sans;
    padding: 0px 0px;
    text-align: center;
        }
#addcBtn{
    background-color:white;
    font-size: 20px;
    border-radius: 12px;
    border: 2px solid #008CBA;
    transition-duration: 0.25s;
    width:200px;
    height:250px;
}
#addcBtn:hover{
    background-color: #008CBA;
    color: white;
}
#yourcBtn{
    background-color:white;
    font-size: 20px;
    border-radius: 12px;
    border: 2px solid #008CBA;
    transition-duration: 0.25s;
    width:200px;
    height:250px;
}
#yourcBtn:hover{
    background-color: #008CBA;
    color: white;
}
.alignBtn1{
    text-align:center;
    margin-left:100px;
    float:left;
}
.alignBtn2{
    text-align:center;
    margin-right:100px;
    float:right;
}

.bg-modal{
    width:100%;
    height:100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center; 
    display: none;
}

.modal-content{
    width: 400px;
    height: 300px;
    background-color: white;
    border-radius: 4px;
    position: relative;
}

input{
    width:50%;
    display:block;
    margin: 15px auto;
}

.close{
    position: absolute;
    top: 0;
    right: 14px;
    font-size: 42px;
    transform: rotate(45deg);
    font-weight: bold;
}

请参阅视频制作者创建的javascript代码。甚至可以将该代码用于 Electron 元素吗？

最佳答案

显示对话框以选择多个文件的示例:

const { dialog } = require('electron')
console.log(dialog.showOpenDialog(
   { properties: ['openFile', 'multiSelections'] }))

对话框从Electron的主线程打开。如果要使用渲染器进程中的对话框对象，请记住使用 Remote 进行访问:

const { dialog } = require('electron').remote
console.log(dialog)

关于javascript - 如何在 Electron js中创建模态？ (javascript，html，css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60388871/

文章推荐： xcode - 我如何才能真正卸载 Xcode？

文章推荐： terminology - 什么是shot弹枪/伏都教编程？

文章推荐： javascript - 如何修复阻塞的 JavaScript 进程？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 Electron js中创建模态？ (javascript，html，css)