引导模态无法打开.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当它尚未打开

回答

相关问题