Как создать модал в электрон js? (javascript, html, css) - PullRequest
Новая
       0

Как создать модал в электрон js? (javascript, html, css)

0 голосов
/ 25 февраля 2020

Скорее мне нужна помощь в создании модала. Используйте это видео для справки: https://www.youtube.com/watch?v=gLWIYk0Sd38

Я следовал этому руководству, но не могу заставить мою кнопку работать. Я не знаю, в чем проблема, и это сводит меня с ума.

введите описание изображения здесь

Нужно ли вводить его код javascript в конкретный местоположение как для электронных проектов? Справка

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, созданный создателем видео. Можно ли даже использовать этот код для электронных проектов?

1 Ответ

0 голосов
/ 25 февраля 2020

Пример отображения диалогового окна для выбора нескольких файлов: 

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

Диалог открывается из основного потока Electron. Если вы хотите использовать объект диалога из процесса рендеринга, не забудьте получить к нему доступ с помощью пульта: 

const { dialog } = require('electron').remote
console.log(dialog)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...