Learn how to trigger a Bootstrap 4 modal simply by clicking a button on the initial page, which will then direct you to a second page where the modal is already activated

In my current project, I am working with Bootstrap 4 and I have a specific requirement to implement a modal. The modal should function in the following way:

  • Upon clicking a button on the first .html page, I want to be redirected to a second .html page where a modal will open as a welcoming message.

Essentially, the modal serves as a popup box with a welcoming message.

Just to clarify, the button code is located in the first .html file, while the modal code is in the second .html file.

Button:

<a href="index.html"><button class="btn btn-primary btn-lg btn-block text-uppercase" type="button"
    data-toggle="modal" data-target="#modalLogin">Sign Up</button></a>

Modal:

<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLoginLabel">Welcome!</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Welcome to the digital construction worksheet.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Continue</button>
            </div>
        </div>
    </div>
</div>

I have attempted various solutions, such as using id's and JavaScript, but have not been successful so far.

Answer №1

In order to open a modal in another page when a user clicks on a link, you can make a small adjustment to the href attribute of the link. For example, you can change it to

<a href="index.html/welcome"></a>
.

Next, in the JavaScript file that is loaded with index.html, you can check if the URL contains the word 'welcome' when the user lands on the page. If it does, you can trigger the modal to display. Here's an example of how you can achieve this:

$(document).ready(function() {
    if (window.location.href.indexOf("welcome") > -1) {
        $("#modalLogin").modal("show");
    }
});

By implementing this method, the modal will not automatically appear when the user visits index.html, but will only show up when the link with 'welcome' in the URL is clicked.

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

Ways to position two images in the center

A website has been created by me and now I am looking to center text on the two images in the header. Here is the relevant code snippet: <div class="header"> <img src="css/title578145459.png" class="headerImage left&qu ...

Sending a parameter to a different function (on a separate webpage)

At the start of my webpage, there are two radio buttons on the first page, each with its own value. Upon clicking a link to move to the second page, a for loop is activated to grab the value of the selected button. The script has been tested and works as e ...

Conceal the button briefly when clicked

How can I disable a button on click for a few seconds, show an image during that time, and then hide the image and display the button again? HTML: <input type="submit" value="Submit" onclick="validate();" name="myButton" id="myButton"> <img st ...

Issue with different domains causes GET requests to be changed to OPTIONS requests

In my recent request and response interaction, I encountered an issue with the Access Allow Control Origin being set to *. Remote Address:xx.xxx.xxx.xxx:xx Request URL:http://api-test.example.com/api/v1/sample Request Method:OPTIONS Status Code:405 Method ...

javascript touch scroll effect

I am looking to enhance the scrolling capability of my app to make it touch-friendly. I have already implemented scrolling using the mouse wheel, drag, and click functions. I recently tried using the touch-scroll plugin from touch-scroll to enable touch sc ...

Continue scanning the expanding page until you reach the end

One of the challenges I am facing is that on my page, when I manually scroll it grows and then allows me to continue scrolling until I reach the bottom. This behavior is similar to a Facebook timeline page. In an attempt to address this issue, I have writ ...

Creating a nested JSON file dynamically in Angular: A step-by-step guide

I am looking to dynamically generate a nested JSON file within an Angular project. The data will be extracted from another JSON file, with two nested loops used to read the information. Below is an example of the initial JSON file structure: { "data": [ ...

Add a selection of paths from a different package into the Router

Seeking a quick solution here. I have the following code snippet and I am looking to efficiently import a multitude of routes from my package. These routes should be managed by the package I am constructing. If I introduce a new page in the package (e.g., ...

Navigate the div with arrow keys

Looking for an answer similar to this SO post on moving a div with arrow keys, could a simple and clear 'no' be sufficient: Is it possible to turn an overflowing div into a "default scroll target" that responds to arrow-up/down/page-down/space k ...

"Upon updating, the array within the mapped state to props in React Redux appears to be

As I work on updating a user's profile through a form, my goal is to ensure the component rerenders after the update and displays the correct information on the form once saved. Here is what I have implemented so far: ProfileInput.tsx const ProfileI ...

Using jQuery to dynamically include option groups and options in a select box

Generate option groups and options dynamically using data retrieved via AJAX. <select name="catsndogs"> <optgroup label="Cats"> <option>Tiger</option> <option>Leopard</option> <option>Ly ...

How to ensure Vue.js code modularity by preventing prop mutation within a child component?

After struggling with an unexpected mutation prop issue in a child component for quite some time, I stumbled upon this insightful quote: "When you have a component that receives an object through a prop, the parent is the one controlling that object, if ...

I'm searching for the HTML5 specifications and information on which browsers support specific features. Can you point me in the right direction

Where can I locate the HTML5 specifications for Internet Explorer, Opera, Firefox, and Google Chrome browsers? ...

Adapting Bootstrap 4 for Use with Internet Explorer 9 and 10

Are there any polyfill libraries that can be utilized to enable Bootstrap 4 (or most of Bootstrap 4) to function with IE9? Here are a couple of libraries that I have found: https://github.com/jonathantneal/flexibility https://github.com/coliff/bootstrap ...

Aggregate and consolidate data based on multiple criteria while ensuring data integrity and maintaining type compliance

In search of a solution, I aim to organize an array of objects by a specified number of keys and calculate the sum of values of another set of keys. For instance, consider the following array: const arr = [ { type: "triangle", color: "green", available ...

Querying a collection in Mongoose for an array of ObjectIds

I've been struggling with this for a few hours now, so I thought I'd post here for help. My issue involves using the find() operator in Mongoose to determine if a key matches any single element in an array. It's similar to the question asked ...

Why isn't my textarea in jQUERY updating as I type?

On my website, I have a comment script that is not functioning correctly in some parts of the jQuery/JavaScript code. Instead of posting an edited comment to PHP, I created a notification window to test if the value passed through is actually changing. W ...

Struggling with React Native and WebSocket integration issues

I've heard some concerns about Socket.io not functioning properly in React Native, so I opted to utilize plain WebSocket instead. Setting up a WebSocket server with node.js was relatively straightforward for me. While all my attempts were successful ...

Is there a way to ensure that my Delete Entry Button is fully operational?

Excuse my lack of experience in coding. I've been struggling with getting my delete button to function properly on both my webpage and my MySQL database. Right now, when I click the delete button, it just redirects me to a URL ending in /delete withou ...

Fix a carousel layout problem

I've made changes to an HTML-PHP module to display portfolio images as a carousel, and I'm using the same module on this website too. However, I've encountered an issue with duplicate content and the previous-next navigation buttons. Can so ...