模态内的模态 - 如何仅关闭内模

Question

我有一个正常工作modal，显示unordered list。此list上的项目之一包含一个打开内部modal（其中又包含视频播放器）的按钮。这一切运作良好，但当我解雇内部modal时，modals（初始和内部）都关闭。下面的代码显示了我的内心modal完成：

<tr><td>List Item <button class="btn btn-success" data-toggle="modal" data-target="#myInnerModal1"></button> 
     <div class="modal" id="myInnerModal1"> 
      <div class="modal-dialogue"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">Title</h4> 
        </div> 
       <div class="modal-body"> 
        <video class="myVideo" id="preview1" controls> 
         <source src="video.m4v" type="video/mp4"> 
        </video> 
       </div> 
       <div class="modal-footer"> 
        <button class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
</td></tr> 

我想找到一种方法来指定在dismiss-modalclass这modal关闭（在这种情况下，这将是myInnerModal1）。

Answer 1

也许关闭使用其独特的HTML ID与javascript代码内模态：

$(function() { 
    $('#innerModal').modal('toggle'); // or 'hide' depending on your needs! 
}); 

Answer 2

你不需要任何额外的或额外的功能来解决这个问题。当关闭内部模态时，因为您将模态置于模态内，并且两个模态都具有相同的关闭按钮data-dismiss="modal"，所以单击内部模态关闭按钮也会触发初始模态的data-dismiss="modal"。

Fiddle

简单的解决办法就是保持内模态呼叫按钮的初始模内​​，但要从初始模内模态HTML，并把它之外，它会解决这个问题

Fiddle working example

原因

Bootstrap不支持stacked/simultaneous/overlapping modals;

Overlapping modals not supported

一定不要打开一个模式，而另一种是仍然可见。一次显示多个模式需要自定义代码。

替代的解决方案模态中的模式

所以，如果你仍想保留内模HTML初始模式里面，然后下面的代码将做的工作并解决问题

在内部模式的HTML关闭按钮变化data-dismiss="modal"到data-dismiss-modal="modal2"

<button class="btn btn-default" data-dismiss-modal="modal2">Close</button> 

并添加以下代码

$("button[data-dismiss-modal=modal2]").click(function(){ 
    $('#myInnerModal1').modal('hide'); 
}); 

它只会关闭内部模态并保持初始模态打开。

$("button[data-dismiss-modal=modal2]").click(function() { 
 
    $('#myInnerModal1').modal('hide'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<button type="button" class="btn btn-info" 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"> 
 
       <tr> 
 
        <td>List Item 
 
         <button class="btn btn-success" data-toggle="modal" data-target="#myInnerModal1"></button> 
 
         <div class="modal" id="myInnerModal1"> 
 
          <div class="modal-dialogue"> 
 
           <div class="modal-content"> 
 
            <div class="modal-header"> 
 
             <button class="close" data-dismiss="modal">&times;</button> 
 
             <h4 class="modal-title">Title</h4> 
 

 
            </div> 
 
            <div class="modal-body"> 
 
             <video class="myVideo" id="preview1" controls> 
 
              <source src="video.m4v" type="video/mp4"> 
 
             </video> 
 
            </div> 
 
            <div class="modal-footer"> 
 
             <button class="btn btn-default" data-dismiss-modal="modal2">Close</button> 
 
            </div> 
 
           </div> 
 
          </div> 
 
        </td> 
 
       </tr> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>