自舉莫代爾有時不顯示

我已經實現了簡單的引導模式，這裏是代碼：自舉莫代爾有時不顯示

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 
<script> 
$('#myModal').on('show.bs.modal', function (e) { 
    console.log(1); 
}); 
$('#myModal').on('shown.bs.modal', function (e) { 
    console.log(2); 
}); 
$('#myModal').on('hide.bs.modal', function (e) { 
    console.log(3); 
}); 
$('#myModal').on('hidden.bs.modal', function (e) { 
    console.log(4); 
}); 
</script>

現在，當我在點擊「打開模態」爲10-15倍，它停止工作，它不開放模式彈出。

我也檢查了這種情況下的變化，所以它沒有在modal中添加「in」類。此外我跟蹤的是與js相同的，所以當模態doent出現在這種情況下，它只顯示console.log 1）;但不是其他人。

來源

2017-04-24 Er.KT

你可能在你的頁面其他錯誤 – madalinivascu

您反覆連接相同的事件，所以這就是你所得到的每一次被觸發事件。 – Nagaraju

@madalinivascu沒有任何其他錯誤頁面 –

您可以嘗試在顯示模式中添加js代碼。

$(function(){ 
 
    $("#btnOpenModal").click(function(){ 
 
    $("#myModal").modal('show'); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<button type="button" class="btn btn-info btn-lg" id="btnOpenModal">Open Modal</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

來源

2017-04-24 05:54:49

工作正常，當我添加bootstrap.js到您的代碼。試試這個可能，這將幫助你

$('#myModal').on('show.bs.modal', function (e) { 
 
    console.log(1); 
 
}); 
 
$('#myModal').on('shown.bs.modal', function (e) { 
 
    console.log(2); 
 
}); 
 
$('#myModal').on('hide.bs.modal', function (e) { 
 
    console.log(3); 
 
}); 
 
$('#myModal').on('hidden.bs.modal', function (e) { 
 
    console.log(4); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

來源

2017-04-24 06:09:48

自舉莫代爾有時不顯示

回答

相關問題