модальный внутри модальный - как закрыть только внутренний модальный

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

Будьте уверены, чтобы не открыть модальное, а другой по-прежнему виден. При отображении более чем одного модального времени требуется собственный код.

Альтернативное решение Modal в Modal

Так что если вы все еще хотите, чтобы сохранить внутреннюю модальный 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>