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>

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>

• javascript
• jquery
• twitter-bootstrap
• modal-dialog

• This seems to be working fine for me without the need for any additional script. The data-dismiss attribute handles the closing of modal on click. bootply./67046 Does your console show any error? – Vikram Deshmukh Commented Nov 6, 2013 at 12:55
• I'm puzzled, as far as I can see I don't get any error... – Metzed Commented Nov 6, 2013 at 13:26

6 Answers 6

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

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>

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

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
}

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

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

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.