javascript - CSS Bootstrap close modal and go to link - Stack Overflow

admin管理员组

文章数量:1278823

I have the following div for a modal box -

<div class="modal fade" id="Community" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <button type="button" onclick="window.location.href='#Pricing'" data-dismiss="modal">Close and go to pricing</button>
    </div>
</div>

On click of the button the modal window closes but it doesn't go to the correct section indicated by #Pricing.

I have the following div for a modal box -

<div class="modal fade" id="Community" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <button type="button" onclick="window.location.href='#Pricing'" data-dismiss="modal">Close and go to pricing</button>
    </div>
</div>

On click of the button the modal window closes but it doesn't go to the correct section indicated by #Pricing.

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Nov 25, 2014 at 4:41 jacksparrow007 asked Nov 25, 2014 at 4:30 jacksparrow007jacksparrow007 1,32844 gold badges2121 silver badges3131 bronze badges 3

• 1 why don't you use <a> link – rjdmello Commented Nov 25, 2014 at 4:37
• @rjdmello is right. Use a normal link, there is no need to close the modal when you go to another page anyway... – Dominik Commented Nov 25, 2014 at 4:40
• 1 I have tried that and it behaves in the same way. And the link is not for another page. Its for the same page with a div with id="#Pricing" . It doesn't go to the required section. Just closes the modal and gets stuck. – jacksparrow007 Commented Nov 25, 2014 at 4:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You are missing a ' in onclick.

<button type="button" onclick="window.location.href='#Pricing'" data-dismiss="modal">Close and go to pricing</button>

Update

I think I get to know the reason. Actually, in your case, onclick is fired before data-dismiss="modal". This means, the location change would happen even before the modal dismissal. However, in order to prevent the page from scroll when a modal present, the body will have a modal-open class. This takes overflow: hidden;, so the page will not be able to scroll more than the height of the modal itself.

To solve this problem, you need to defer your location change to after the modal disappears. You can move it into the callback of the hidden.bs.modal event.

The event docs can be found here: http://getbootstrap./javascript/#modals-usage .

Here's how to close the dialog and go to the document fragment at the same time:

<a href="#foobar">
  <span data-bs-dismiss="modal">Close</span>
</a>

if the link is in same page just use

jQuery(function($) {
    $('#myModal').on('hidden.bs.modal', function (e) {
        $('html, body').animate({
            scrollTop: $("#pricing").offset().top
        }, 2000);
    })
});

see this jsfiddle

use this event

$('#Community').on('hidden.bs.modal', function (e) {
    // do something...
    window.location.href='/#Pricing'
})

本文标签： javascriptCSS Bootstrap close modal and go to linkStack Overflow