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>

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. http://www.bootply.com/67046 Does your console show any error? — Vikram Deshmukh, Nov 06 '13 at 12:55

score 3 · Accepted Answer · edited May 23 '17 at 12:32

3

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

edited May 23 '17 at 12:32

Community

1
1

answered Nov 06 '13 at 12:36

Lan

709
1
8
16

Thanks, I have multiple modal windows with the same contact button within them, so I came up with the following code using a class name instead of ID. It seems to work. I also had to add `$('body, html')` because `$(document.body)` didn't seem to work in IE8. Does it look ok? `$('.my_contact_button').click(function(){ $().modal('hide'); $('body, html').scrollTop($('#section-contact').offset().top); });` – Metzed Nov 06 '13 at 13:22
If it works for your case, use classname, name or id! whatever you need to do the trick! :D – Lan Nov 06 '13 at 15:00

score 2 · Answer 2 · answered Apr 29 '15 at 08:30

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>

score 2 · Answer 3 · answered Aug 08 '16 at 00:40

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

score 0 · Answer 4 · edited Jan 02 '21 at 12:32

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
}

score 0 · Answer 5 · answered Feb 09 '21 at 22:31

0

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

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

answered Feb 09 '21 at 22:31

realgt

1,715
15
12

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

5 Answers5