Is it possible to trigger the same modal from various JavaScript files?

Can a single modal be opened on the same HTML page from two different JavaScript files?

Suppose I am currently on the homepage. When I click a navigation button, it triggers the openModal function and should display the modal below.

Homepage.html

<div id="Homepage-modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="cart-container">
                <div @click="goToStore()">
                    <div class="button">Click Me</div>
                </div>
            </div>
        </div>
    </div>
</div>

Homepage.js

function (openModal){
    $('#Homepage-modal').modal('show');
}

Is it possible for me to click the same button on a different page using a different JS file to display the same modal from homepage.html without duplicating the modal in menu.html?

Answer №1

To create a modular system for modals, consider placing the modal's HTML code within a separate Vue.js subcomponent named 'modal'. Then, simply call this component in the HTML of any other components where you want to display the modal by including <modal></modal> in their respective templates.

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

Progress bar indicating the loading status of an AJAX script

I am facing a challenge with creating a progress bar in AJAX. The entire page is loaded through AJAX, and one of the webpage elements uses AJAX to fetch large rows from the database. I have attempted to implement a progress bar within this script using a ...

Utilizing arrays dynamically to generate data for a bar chart display in JavaScript

I'm currently working on generating a bar stack graph using the chart.js JavaScript library. My JavaScript array contains the following data: 0: {labels: "01/01/2020 00:00:00", data: 7433, category: "A"} 1: {labels: "01/01/2020 00:00:00", data: 774, ...

The anticipated reply was supposed to consist of an array, however it ended up being an

I'm brand new to Angular and I've been searching for a solution to my issue with no luck. My app is supposed to retrieve data from a MongoDB database and display it to the user. However, I keep getting this error message: Error: [$resource:bad ...

Libraries that provide webkit support for all browsers

Looking for a library that supports CSS webkit across various browsers, including older ones like ie6. Preferably written in JavaScript. Any recommendations? ...

JavaScript code snippet for detecting key presses of 3 specific arrow keys on the document

For this specific action, I must press and hold the left arrow key first, followed by the right arrow key, and then the up arrow key. However, it seems that the up arrow key is not being triggered as expected. It appears that there may be some limitations ...

React has successfully installed react router, but unfortunately, I am encountering difficulty in getting the page

I'm currently in the process of setting up react router and I need help rendering the main page. Here is the current configuration in my index.js import React, { Component, PropTypes } from 'react'; import { Router, Route } from 'reac ...

Create a parent dropdown class that contains two separate bootstrap dropdowns nested within it

I am encountering an issue with my dropdown menus. I have 2 dropdown menu items under the same parent dropdown class. However, when I click on dropdown action 1, it displays the body of dropdown menu 2 items instead. <!DOCTYPE html> <html> < ...

Looking to identify the maximum and minimum values within an array using user prompts

For our latest assignment, my teacher tasked us with creating a program to determine the highest and lowest marks among a group of up to 15 students. This means that we can input fewer than 15 students if needed. The user has to enter each student's n ...

Adjust the JQuery UI Slider value in real-time as you slide the slider

I am currently using a jQuery slider. When I slide the slider, I test for a specific scenario in the slide function. If the scenario is not met, the slider should revert back to its original position. For instance: Let's say the current slider value ...

Trouble with $http response not appearing in AngularJS application

Currently, I am in the process of developing an angularjs application and encountering a challenging issue with setting up the $http connection to a php file. The header is displaying a response that I echoed from php. Nevertheless, two key problems persis ...

Is the UUID key displayed as an object within a Reactjs prop?

Hey there internet pals, I've stumbled upon a mysterious corridor, so dark that I can't see where I'm going.. could really use someone's flashlight to light the way. I have put together a basic, no-frills to-do list program. It consi ...

Leverage Vue data within your stylesheet

Is there a way to access Vue data within my style sheet? I typically write in Sass, but I don't believe that is the root of the problem. The following attempt did not yield the desired results: #app background-color: {{ myText }} ...

Styling extracted content using headless browsing algorithm

Is there a way to format the scraped text from multiple elements on the page for use elsewhere? I have JavaScript code that can loop over the elements, add their text to an array, and turn it into a string, achieving the desired formatting. How can I inc ...

Identifying mouseover event across numerous elements in JavaScript

I'm attempting to identify the mouseover event on multiple elements using their class as a reference. For instance: <div class="myElement">1</div> <div class="myElement">2</div> <div class="myElement">3</div> & ...

Error: The function keytar.setPassword cannot be executed due to a TypeError

I am experiencing issues when trying to save a password using keytar.js. Every function from keytar is giving me an error. Just for reference, the library is properly installed and the functions are present (I verified this with console.log) and they work ...

What is the process for uploading a file in binary format using the ng-file upload library in AngularJS?

While trying to upload a file to Amazon S3 Bucket using a pre-signed URL from AngularJs, I encountered an issue where the zip file ended up getting corrupted. Interestingly, everything worked as expected when I uploaded the file from Postman in binary form ...

Display the Sencha Touch Picker with the previously selected option showing

When using the Sencha Touch Picker component, I noticed that if I select a data and then hide the picker, upon showing it again, only the first record is selected each time. I want the picker to display my last selection when shown again. To achieve this ...

Only when the condition is satisfied in AngularJS will I include JSON data

I have a JSON file named components.json containing information about various board spaces: {"components": { "boardSpaces": [ {"name":"GO!", "price":0, "position":0, "type":"go"}, {"name":"Mediterranean Avenue", "type": "property", "pr ...

Encoding identification data from JSON using ColdFusion

Hello everyone, I've been puzzling over how to intercept and encrypt database record ID from a JSON request in ColdFusion. Below is the code I have so far, along with my unsuccessful attempt. Any assistance would be greatly appreciated. <cfquery ...

When navigating between Dynamic Pages using NuxtLink, the store data is not accessible

Check out the demo below. Click here for stackblitz When transitioning from a top page to a post page, the correct content is displayed. However, moving from one post page to another does not display the correct content immediately. Reloading the page w ...