html - 漏洞 : Bootstrap Modal Box

我使用的是 Bootstrap 3，我创建了一个包含启动 bootstrap 模态框链接的 NavBar。

几秒钟后，模态框卡住了!!当我在它外面点击时，它消失了，所有的网站布局错误(背景颜色变化，菜单位置......)..然后我不能再打开它了!应该刷新页面...

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

链接:www.tafraout.net
点击 : "Espace Membre"启动 ModalBox

最佳答案

当我尝试直接从 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();
});

关于html - 漏洞 : Bootstrap Modal Box，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20123783/