[英]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_modal元素,其數據模態,表示模態ID,它用於顯示模態。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.