javascript - 没有数据切换和数据目标属性，模态无法工作

Question

我使用的是 bootstrap 4 js，我有下面的链接可以打开模式:

<a id="show_login_modal" href="">Login</a>

然后是模态:

<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
...
</div>

但我想用默认的 jquery 打开模式，所以我有下面的代码:

 $('#show_login_modal').click(function(){
    $('#login_modal').modal('show');
})

$('#close_login_modal').click(function(){
    $('#login_modal').modal('hide');
})

问题是，当单击登录链接时，它看起来像淡入淡出，然后淡入淡出消失但模态不打开。你知道为什么吗？

Answer 1

请检查您是否没有包含 jquery 两次。这可能也是由于这个原因发生的。此外，在某些情况下，插件也会产生问题。

确保按要求的顺序放置库以获得结果:

1- 首先 bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

(也就是说jquery.min.js必须在bootstrap.min.js之前调用)

确保以上内容后，请尝试以下代码段。

   <a id="show_login_modal" href="javascript:void(0)">Login</a>

然后编写您的 jquery 代码。发生的事情是空 href 不允许弹出窗口打开，只需执行 javascript:void(0) 后跟您的代码即可。