自举莫代尔有时不显示

我已经实现了简单的引导模式，这里是代码：自举莫代尔有时不显示

<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

自举莫代尔有时不显示

回答

相关问题