Are the methods of implementing a modal in JavaScript, HTML, and CSS similar to those in Electron JS?

Struggling to implement a button that triggers a modal display using JavaScript? The HTML and CSS components are set up correctly, but the JavaScript functionality seems to be causing issues. Is it possible that Electron JS differs from traditional 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);
}

// 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', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Answer №1

I stumbled upon the solution to this issue in the following question: Electron: jQuery is not defined

All you need to do is copy that code and replace it with your own JavaScript.

For instance:

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap.min.css">
</head>

<body>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
</body>

<!-- Insert this line above script imports  -->
<script>
    if (typeof module === 'object') {
        window.module = module;
        module = undefined;
    }
</script>

<!-- normal script imports etc  -->
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap.min.js"></script>

<!-- Insert this line after script imports -->
<script>
    if (window.module) module = window.module;
</script>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Troubleshooting: Why does a DT Datatable with selectInputs keep reverting back to

I recently incorporated selectize capability into the selectInputs within a column of a DT datatable in my Shiny app. Following some guidance provided here, I implemented JavaScript to enhance the style and search functionality of selectize. However, due t ...

Addon for Firefox: Image Upload

I am looking for a way to streamline the process of uploading an image to a website through a Firefox Addon. While I know it is possible to use createElement('canvas'), convert Image data to base64, and XHR POST the data, I would prefer to lever ...

Uh-oh! Angular 6 has encountered an unexpected error with template parsing

I am currently working on an Angular application where I have integrated the FormsModule from '@angular/forms' in my app.module.ts. However, despite this, I keep encountering the error message No provider for ControlContainer. Error log: Uncaug ...

jQuery accordion section refuses to collapse

In order to achieve the desired outcome, each Section should initially appear in a collapsed state. Panel 0 and 2 start off collapsed, however, panel 1 does not but can be collapsed upon clicking. Additionally, Panel 1 incorporates an iframe that displays ...

Laravel Tutorial: Utilizing for and foreach Loops to Showcase Data in Blade Template

I am trying to use a for and foreach loop to display data based on a template table. However, I am running into an issue where the else conditions always display an index of their own. My expectation is as follows: https://i.stack.imgur.com/tqDSn.png Th ...

Is there a way for me to extract a sub-object from a larger object, utilize it as the data for multiple instances of a single controller, and ensure that all instances remain synchronized?

Sorry for any confusion in the question :-P I am working with a single JavaScript object that contains all the data for my application. I have a controller that will be used multiple times throughout the app, all working with the same data added through a ...

Retrieve all documents from a Firebase User's collection

Recently, I created a Firebase cloud function where my goal is to access every user's internal collection named 'numbers' and examine each document within that collection for some comparisons. Do you have any insights on how I can achieve t ...

Incorrect scope value detected in Angular controller

I recently started learning Angular 1, and I've encountered an issue with my code: var app = angular.module("Football", []); app.factory("competitions", ['$http', function($http) { return $http.get("json/competitions.json") .success(fu ...

Greetings! Unable to retrieve data within the TRY block following the resolution of an error in another function

Consider the following code snippet: const axios = require('axios'); const cheerio = require('cheerio'); let data = null; const parseNewCorporations = async (iter) => { let link2 = 'https://www.finanzen.net/aktien/' + ...

PHP Ajax file uploads can be tricky, as they often result in the frustrating "undefined

Encountering issues with submitting file through ajax. Despite following instructions from various sources, the formdata does not seem to contain the file resulting in an 'undefined index 'image'' error. <form enctype: 'multip ...

Making Cross-Origin Requests using jQuery's Ajax function and PHP

I've attempted numerous times to make this function properly, but for some reason, I just can't seem to figure it out. Initially, everything was working flawlessly for a few requests, and then out of the blue, it stopped functioning. Below is t ...

What is the best way to post an image using nodejs and express?

Recently, I've been working on a CMS for a food automation system and one feature I want to incorporate is the ability to upload pictures of different foods: <form method="post" enctype="multipart/form-data" action="/upload"> <td>< ...

Adding clickable padding to a Draft.js editor can enhance the user experience and make the editing process

Is there a way to apply padding to the Draft.js Editor so that clicking on the padding area selects the Editor? If I add padding directly to the container div of the Editor, the padding displays properly but clicking on it does not enable writing in the E ...

The div is obscured by the background image

Could someone please assist me in preventing the .background image from overlapping with the skills div when the viewport expands either vertically or horizontally? I've tried several approaches without success. Any help would be greatly appreciated! ...

What is the best way to implement a custom toast delay in a React application using setTimeout

The concept is straightforward: When the function showToast is called, I aim to change my toast's className to show, and then remove it by replacing with an empty string after displaying it for 3 seconds. HTML: <div id="toast">New col ...

Template not rendering array data correctly in Meteor

Here is an example of the array structure: var myarray = [ device1: [ name:device1 , variables: [ variable1: [ name: variable1, unit: "a unit", ...

The ng-model remains unchanged when the <select> element is modified using JavaScript

I am currently working on creating a customized dropdown box with the help of JavaScript and anglersJS to connect the data with the select element. The user interaction involves clicking on a div element that is styled to act as the dropdown option. This d ...

import an external JavaScript file in an HTML document

Looking to load a .js file from a simple HTML file? If you have these files in the same folder: start.js var http = require('http'); var fs = require('fs'); http.createServer(function (req, response) { fs.readFile('index.htm ...

Issue encountered with ngFor: 'Identifier not defined __type does not have any such member'

Recently, I successfully implemented a sub-component that allows users to dynamically add and remove a set of controls to and from a collection. The inspiration for this solution came from reading through this particular thread on Stack Overflow. While ev ...

Output object data to table by clicking on it - requires two clicks for the data to be

I have a situation where I want the user to click a button in order to print an object obtained from a web service into a table. The issue is that currently, I have to click the button twice for it to work properly. Here's some more detail: The button ...