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

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

转载作者：行者123 更新时间：2023-11-29 22:53:37

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

以下是我的 app.js :

$('.test').on('click', function (event) {
    event.preventDefault();
     $('#join-req').modal();
      });

HTML :

<a href="#" class="test">Join to my Group</a>

模态:

<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>

提前致谢

最佳答案

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

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

关于javascript - Modal 在 Firefox 中有效，但在 Chrome 中无效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57000362/

文章推荐： android - 获取不允许 apk 运行的编译错误

文章推荐： mysql - SQL : Selecting the time range between two column

文章推荐： javascript - 通过 ajax 在模态中从

首页

博学

6Ren·AI

商城

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