Question

我正在使用Bootstrap 3，我创建了一个包含启动引导模式框的链接的NavBar。

几秒钟后，模态盒冻结!!当我点击它外面，它消失了，所有的网站布局错误（背景颜色变化，菜单位置......）..然后我不能再打开它了！应刷新页面......

我注意到ModalBox将“modal-open”类添加到<body>但是在关闭时，该类仍然在这里......

链接：www.tafraout.net
点击：“Espace Membre”启动ModalBox

Answer 1

尝试在Se Connecter

中更新此内容

<a data-target="#LoginModal" data-toggle="modal" href="http://www.tafraout.net/"><i class="glyphicon glyphicon-log-in"></i>
Se Connecter
</a>

到

<a data-target="#LoginModal" data-toggle="modal" > <i class="glyphicon glyphicon-log-in"></i>
Se Connecter
</a>

没有应该有效的href属性

Answer 2

当我尝试直接从javascript控制台打开模态时，例如通过评估$( "#LoginModal" ).modal( "toggle" );，它运行良好。这意味着你没有以正确的方式打开它;实际上，href属性缺少了这个东西。

当您点击链接时，Bootstrap将拦截事件并切换模态对话框; 然而，Javascript正在进行事件传播（有关详情，请参阅this topic），这意味着您的链接会正常执行。因为您在其中放置了绝对URL，它会尝试将您发送到新页面。

解决问题的两种方法：要么将#作为链接目标，要么在窗口中仍有一些移动因为浏览器会将焦点放在页面顶部。在你的情况下，这不会有任何不好，但如果你不知道这个技巧，它可能会导致一些奇怪的行为。

第二种解决方案是将事件附加到链接，并手动切换模态;例如，使用jQuery：

$( "#yourLink" ).on( "click", function() {
    $( "#LoginModal" ).modal( "toggle" ); // Toggle the modal
    return false;
});

return: false;会停止事件传播，因此您的链接不会被跟踪（页面中不会发生任何变化）;如果您不想使用return值，只需在事件对象上调用stopPropagation()（不要忘记将其包含在您的函数中：

$( "#yourLink" ).on( "click", function( e ) {
    $( "#LoginModal" ).modal( "toggle" ); // Toggle the modal
    e.stopPropagation();
});