When I try to open the modal directly from a javascript console, for example by evaluating $( "#LoginModal" ).modal( "toggle" );, it works great. That means that you are not opening it the right way ; in fact, it is the href attribute that is missing the thing.
When you click on your link, Bootstrap will intercept the event and toggle the modal dialog ; however, Javascript is doing event propagation (see this topic for more information), and that means that your link is then executed normally. Because you put an absolute URL in it, it will try to send you to an new page.
Two ways to solve it : either you put # as the link target, but you will still have some moving in your window because the browser will focus the top of the page. In your case, that won't do any bad, but it can lead to some weird behaviors if you don't know this trick.
The second solution is to attach an event to the link, and toggle the modal manually ; for example with jQuery :
$( "#yourLink" ).on( "click", function() {
$( "#LoginModal" ).modal( "toggle" ); // Toggle the modal
return false;
});
return: false; will stop the event propagation, and so your link is not followed (nothing will change in your page) ; if you don't want to use the return value, you can simply call stopPropagation() on the event object (don't forget to include it in your function :
$( "#yourLink" ).on( "click", function( e ) {
$( "#LoginModal" ).modal( "toggle" ); // Toggle the modal
e.stopPropagation();
});
