CSS Bootstrap Close Modal And Go To Link

I have the following div for a modal box -

Solution 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 .

Solution 2:

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

Solution 3:

use this event

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

Share