时间戳

首页 > 解决方案 > Modal 在 Firefox 中有效，但在 Chrome 中无效

javascript - Modal 在 Firefox 中有效，但在 Chrome 中无效

问题描述

Modal 在 Firefox 中工作，但在 Chrome 中不工作，我添加了下面的代码。

  1. 以下是我的 app.js ：
$('.test').on('click', function (event) {
    event.preventDefault();
     $('#join-req').modal();
      });
  1. HTML：
<a href="#" class="test">Join to my Group</a>
  1. 模态：
<div class="modal fade" tabindex="-1" role="dialog" id="join-req">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Join Request</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="post-body">Join request to expert</label>
                            <textarea class="form-control" name="join-body" id="join-body" rows="5"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="modal-save">Submit request</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

以下是 Bootstrap 和 jquery 链接：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

 <link rel="stylesheet" href="{{ URL::to('src/css/main.css') }}">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{ URL::to('src/js/app.js') }}"></script>

提前致谢

标签： javascript

解决方案

鉴于您的控制台中没有显示任何错误，我可以想到 3 个可能的问题原因。

  • JQuery可能已经加载了两次。
    • 检查是否包含可能已经包含在其他文件中的文件。
  • 您引用的.js文件的顺序可能不正确，
    • 确保已加载 JQuery，然后才加载 Bootstrap 。
  • 您的当前版本JQuery不能很好地工作。Bootstrap尝试升级两者之一或两者。

推荐阅读