引导模式只有在刷新页面后才能工作
Bootstrap modal only works after refreshing page
我在Bootstrap Modal中遇到了一个非常奇怪的问题:
第一次在清除浏览器缓存的情况下加载网页时,单击一个图标,该图标应打开
它未打开的模式。当我刷新页面并单击图标时,会出现模态。。。当我关闭模态并再次单击图标时,它再次工作
这是我的头代码:
<link href="libs/jquery/jquery-ui.css" rel="stylesheet" />
<link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="libs/jquery/jquery-2.1.4.min.js"></script>
<script src="libs/jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="libs/jquery/jquery-1.11.3.min.js"></script>
<script>$(document).ready(function() { $.noConflict(); )};</script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/jquery/jquery-ui.js"></script>
这是我的身体代码:
<a id="myIcon">Open Modal</a>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">Body</div>
<div class="modal-footer">Footer</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
对于那些想看到完整代码的人来说,这是我的JS:
$(document).ready(function() {
$('#myIcon').click(function () {
$('#myModal').modal('show');
}
});
<a id="myIcon" data-toggle="modal" data-target="#myModal">Open Modal</a>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">Body</div>
<div class="modal-footer">Footer</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
你可以避开你的剧本。在这种情况下,您的脚本只是模拟单击模态。Bootstrap已经有一个与按钮相关的事件,这些按钮具有我在您的锚中写入的属性。
$(document).ready(function() {
// You are triggering a click in your button
$('#myIcon').click(function () {
// After the click, you force the modal to be shown
$('#myModal').modal('show');
}
});
您只能允许JS与模态进行交互。这样,模态就不会有关联的事件。
<a class="open_modal" data-modal="myModal">Open Modal</a>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">Body</div>
<div class="modal-footer">Footer</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
您移除锚点的属性,然后:
$(document).ready(function() {
$('.open_modal').on('click',function () {
var idModal = $(this).data("modal")
$(idModal).modal('show');
}
});
这样,如果单击.open_mode元素,它的数据模态表示模态id,它将用于显示模态。
相关文章:
- 刷新后,setTimeout将工作或不工作
- .html()不会'页面更改或刷新时无法工作
- AngularJS控制器没有'第一次刷新页面后无法工作
- .addClass不工作(刷新时被删除)
- Javascript don'刷新页面后无法工作-为什么
- Kml层在刷新后工作正常,但给定typeError:无法读取属性getMap.第一次加载时
- jQuery AJAX刷新没有'不能在iPhone上工作
- Javascript在刷新后停止工作
- 页面刷新时脚本无法正常工作
- 为什么 jquery toggle() 方法在页面不刷新的情况下无法正常工作
- ngCookie在我刷新页面后无法正常工作
- Angular + requireJS:快速刷新页面会导致页面在 Chrome 中停止工作
- Jquery 日期选择器仅在页面刷新后工作
- 将公司名称绑定到更新面板中的下拉列表,自动完成文本框工作,但每次页面刷新时
- 防止刷新后返回不工作
- 轮播在初始重定向时中断,但在刷新时工作正常
- Javascript仅在第一次刷新后工作
- Javascript在页面刷新后工作,不知道解决方案
- JQuery 函数在页面加载时未触发,它仅在我刷新页面或再次重新访问同一页面后才能工作
- Rails 应用程序 - jQuery Document.ready在单击链接时不调用,但在新选项卡中打开或刷新时工作