javascript - Modal 在 Firefox 中有效,但在 Chrome 中无效
问题描述
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">×</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
尝试升级两者之一或两者。
推荐阅读
- cassandra - Cassandra 对仅知道部分分区键的表进行软删除
- reactjs - 如何在 React 测试库中的多个测试中使用单个渲染。?
- javascript - rxjs这个语法怎么有效?
- python - Matching Columns to Geojson File
- javascript - 如何导航到屏幕而不将其添加到后台堆栈?
- php - 使用我自己的各种付款选项的高级设置的自定义条纹结帐表格
- sql-server - 无法在 SQL Server 2017 中以 STANDBY 模式还原事务日志
- c++ - 获得最大的 Pair Wise 产品 C++ 并且输出并不总是与我的代码正确
- activemq - MassTransit - 启动总线时 AmazonMQ 的套接字异常
- r - 使用不断变化的 shapefile(只有 4 个不同的 shapefile)制作动画地图挂起