Metzed Metzed - 4 months ago 10
Javascript Question

How do I close a Modal window and automatically navigate to Anchor using the same link?

I'm using Bootstrap 3.0 and I have an open Modal window with two 'buttons' at the bottom, one says 'Contact Us' and the other says 'Close'.

When someone clicks the 'Contact Us' button I want the Modal window to close and the user to be automatically taken to a specific anchor on the same page.

The following doesn't work. It does scroll the page to the desired anchor, but the user can't see this because it doesn't close the modal window...

<a class="btn btn-info" data-dismiss="modal" href="#section-contact">Contact Us</a>

Lan Lan
Answer

Have you tried or thought about a jquery onclick function on the close button?

Maybe you can force the modal to close manualy with (see docs)

$('#myModal').modal('hide');

and navigate to the anchor using (see answer)

$(document.body).scrollTop($('#anchorId').offset().top);

and the result will be:

HTML:

<a class="btn btn-info" href="#" id="contact_btn">Contact Us</a>

jquery:

$('#contact_btn').click(function(){
    $('#myModal').modal('hide');
    $(document.body).scrollTop($('#anchorId').offset().top);
});