CSS Bootstrap close modal and go to link

Question

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.

Answer 1

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.com/javascript/#modals-usage .