How can I navigate to a specific section within a Bootstrap modal without being redirected back to the origin of the modal?

Question

How can I navigate to a specific section within a Bootstrap modal without being redirected back to the origin of the modal?

Currently in the process of creating a basic front end website with Bootstrap for styling. One section I've developed includes modals, where users click a button to open a centrally located modal window.

Desired Functionality

I aim to enable users to click a button within the modal that redirects them to another part of the page while simultaneously closing the modal.

To achieve this, I have successfully used <a> tags, as well as href and id attributes to guide users to the intended location on the page. Additionally, I incorporated

onclick="window.location.href='#middle'"

for redirection purposes.

The Issue arises when users click the button on the modal. After being redirected and the modal closes, the window quickly reverts back to the original position where the button was initially pressed.

My objective is to prevent this automatic return to the initial modal trigger point and ensure users remain at the new destination they clicked on.

Although I tested using <a> instead of <button>, the issue persisted.

An interactive demonstration displaying the problem can be found on jsfiddle:

https://jsfiddle.net/peamanschesthair/kdu5gno1/42/

All suggestions and solutions are welcomed and appreciated.

html jquery css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Utilize the setTimeout function to postpone the change in location, following the closure of the modal through the hide event. To identify the specific element that triggered the dismissal, inspect the document.activeElement...



$('#exampleModalCenter').on('hide.bs.modal', function (e) {
    var closeTrigger = document.activeElement.id
    if (closeTrigger === 'btnMove') {
        setTimeout(()=>{
          window.location.hash = '#middle'
        },400)
    }
})

Live Example: https://example.com/p/ABC123

Another approach: Mark a data flag during the modal hide event when btnMove is pressed, then link it with the hidden event and verify the data flag...

$('#exampleModalCenter').on('hide.bs.modal', function (e) {
    var closeTrigger = document.activeElement.id
    if (closeTrigger === 'btnMove') {
        this.data = 'move'
    }
}).on('hidden.bs.modal', function (e) {
    if (this.data === 'move') {
        setTimeout(()=>{
          window.location.hash = '#middle'
        },400)
    }
})

Answer 2

Utilize the setTimeout function to postpone the change in location, following the closure of the modal through the hide event. To identify the specific element that triggered the dismissal, inspect the document.activeElement...



$('#exampleModalCenter').on('hide.bs.modal', function (e) {
    var closeTrigger = document.activeElement.id
    if (closeTrigger === 'btnMove') {
        setTimeout(()=>{
          window.location.hash = '#middle'
        },400)
    }
})

Live Example: https://example.com/p/ABC123

Another approach: Mark a data flag during the modal hide event when btnMove is pressed, then link it with the hidden event and verify the data flag...

$('#exampleModalCenter').on('hide.bs.modal', function (e) {
    var closeTrigger = document.activeElement.id
    if (closeTrigger === 'btnMove') {
        this.data = 'move'
    }
}).on('hidden.bs.modal', function (e) {
    if (this.data === 'move') {
        setTimeout(()=>{
          window.location.hash = '#middle'
        },400)
    }
})

How can I navigate to a specific section within a Bootstrap modal without being redirected back to the origin of the modal?

Answer №1

Similar questions

Concluding the use of angular-bootstrap-datetimepicker when selecting a date

Conceal HTML components on certain devices

What is the best way to insert a JavaScript variable into a filter while using ng-repeat?

Upgrading from synchronous $.ajax() to AngularJS $http or vanilla JavaScript (XHR) for asynchronous calls

Is it possible to trigger an AJAX function automatically following the success of another AJAX function?

Create a Grid-Item-List with a custom arrangement, utilizing techniques like flex-box to achieve the desired layout

Adjust the size of an element using the jQuery library's knob.js

What causes parseInt to transform a value into infinity?

Creating a function that counts the number of times a button is clicked

What is the best way to have various texts display after a certain number of clicks?

What is the best way to set up a clickable image without making the entire div clickable?

JavaScript MP3 player

Building a service operation for an untyped custom data service provider entity without relying on entity framework

Is it possible to pass multiple IDs into document.getElementById?

What is the approach for capturing system or website sound using JavaScript?

Retrieve all div elements by their data attribute until reaching a certain condition

Are Bootstrap Input groups inconsistent?

Performing date comparison in JavaScript with varying date formats

Utilizing Jquery to pass two classes along

What is the best way to fill in predetermined HTML with information using jQuery?