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

（换句话说，必须在bootstrap.min.js之前调用jquery.min.js）

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

ax

然后编写你的jquery代码。发生的事情是空的href不允许弹出窗口打开，只需执行javascript：void（0）后跟代码。

Answer 2

我可以重现结果的唯一方法是保留href属性并设置为href=""。删除它或设置哈希值（href="#"）会绕过问题，这将是我推荐的解决方案。

那，或者将该元素转换为<button>以完全绕过超链接默认行为。

＆＃13;

$('#button_modal, #link_modal').click(function(){
  $('#login_modal').modal('show')
});

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<button id="button_modal">Login</button> or <a id="link_modal">Login</a>

<div id="login_modal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3>Modal header</h3>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      
      <div class="modal-body">
        <p>My modal content here…</p>
      </div>

      <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

我还要注意，当您通过JavaScript激活Modal时，没有必要依赖JavaScript来关闭您的模态。无论模态如何初始化，模拟结构中的data-dismiss属性都将起作用。

没有数据切换和数据目标属性，模态不起作用

2 个答案: