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

Question

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>

Answer 1

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);
});

Answer 2

I have experienced the same issue, but the answer provided by Lan did not work for me.

Finally, I work it out by using onClick to close modal class .modal instead of using the id of the particular modal #myModal I wanted to close. This works because you can only have one modal open at a time in your web:

<a href="#section-contact" onClick="$('.modal').modal('hide');">Contact us</a>

Answer 3

Js

// .my-anchor = the class of the trigger
$('.my-anchor').on('click', function(e) {
    e.preventDefault();

    // it will search throughout .my-anchor ancestors to find the closest .modal
    $(this).closest('.modal').modal('hide');

    var hash = this.hash;

    $('html, body').animate({ scrollTop: $(hash).offset().top }, 300);
});

HTML

// clicking this link will close the modal and scroll to wherever #products is located on the page
<a href="#products" className="my-anchor">Click Here</a>

In this example, hash will be #products, but it will update to any other anchor you might have

Answer 4

I am using for this issue another solution. I had the same problem while I have a modal with an "section" overview and i want to jump out of this modal on the same page to a specific section. I simply pass the section id in the link and pick the section ID by GET and do a PHP header to the section.

My HTML link in the modal:

<a class="small text-primary stretched-link" href="1.php?section_id=123"></a>     

My PHP code on the same page (somewhere in header):

if($_GET){
  $section_id = $_GET['section_id'];
  header("Location: 1.php#$section_id");
} 
if(!$_GET){
  // Nichts wurde übergeben
}

Answer 5

None of the other answers worked for me. but this code did:

<a href="#contact" onclick='$(".modal").parent().hide()'>contact form</a>

Answer 6

Here's the simplest way to do this, in vanilla JavaScript, without triggering the weird race condition caused by the page scrolling while the modal is still closing:

document.querySelector("#yourModal").addEventListener("hidden.bs.modal", function() {
   window.location.href = window.location.href.split("#")[0] + "#yourAnchor";
});

Remember to replace #yourModal and #yourAnchor with your own.