引導模態無法打開.hidden - > .show當它尚未打開

情況：兩種情態動詞（modal1和modal2的modal1should打開模式2的modal1關閉後引導模態無法打開.hidden - > .show當它尚未打開

打開Modal1
點擊按鈕，關閉Modal1和開放Modal2

的JavaScript代碼：

   $("#btToOpenModal2").click(function() { 
        $('#modal1').modal('hide'); 

        setTimeout(function(){ $('#modal2').modal('show'); }, 1000); 

       });

問題： 新模式只顯示灰色背景。

如果我確實打開了第一個按鈕（和關閉）的模態2，然後我使用JavaScript代碼（其他按鈕），然後它的工作。

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

我不明白爲什麼這是行不通的，也許有人已經有這個問題。

來源

2017-03-04 osion

請分享所有html和javascript不僅僅是一些片段，所以我們可以提供幫助。 – caisah

@caisah我創建了一個簡單的... – osion

做這樣的事情。當modal1是過渡完成後關閉

$('#modal1').on('hidden.bs.modal', function (e) { 
    // do something... 
});

hidden.bs.modal被解僱，或者你想立即啓動它，因爲它已關閉使用以下命令：

$('#modal1').on('hide.bs.modal', function (e) { 
    // do something... 
});

來源

2017-03-04 10:30:13

問題是，當面板關閉（模態代碼在那裏），然後不工作=） – osion

我創建了一個沒有別的東西的簡單例子。現在Modal1（id） - > Button-> open2（id）不再打開Modal2

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal1</button> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal2</button> 

    <!-- Modal2 --> 
    <div class="modal fade" id="myModal2" 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> 

    <!-- Modal1 --> 
    <div class="modal fade" id="myModal1" 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"> 
     <button type="button" class="btn btn-info btn-lg" id="open2">Open Modal</button> 
      <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> 

</div> 

<script type="text/javascript"> 
$("#open2").click(function() { 

    $('#myModal1').modal('hide'); 

    setTimeout(function() { 
     $('#mymodal2').modal('show'); 
    }, 1000); 
}); 
</script> 

</body> 
</html>

來源

2017-03-04 13:59:52 osion

引導模態無法打開.hidden - > .show當它尚未打開

回答

相關問題