如何在容器div内显示bootstrap v4模型框？

Question

使用引导程序v4.0.0-alpha非常棒，在这里我正在寻找：我需要将模态框放在容器div内，而不是整个屏幕上。

我试图改变一些内置的CSS类和是一些JavaScript :)喜欢：

的z-index：1051;

更改右navBar，但不满足于那里，任何简单的解决方案？

Answer 1

1. 创建它的可变var mod和负载的模态;

   var mod = $('.modal'); 
   

2. 创建容器内一个div <div class="insidemodal"></div>要显示模式

3. 使用Bootstrap 4 modal event listener，最好show.bs.modal并把var mod = $('.modal');里面并加载模式在insidemodal选择时态要展现。

   $('#myModal').on('show.bs.modal', function() { 
       var mod = $('.modal'); //Create variable and load modal in it 
       $('.insidemodal').html(mod); //Load modal to `insidemodal` Selector 
   }); 
   

4. 制作按照Modal CSS变化

   .modal-backdrop { 
       display:none //<---Kill the modal backdrop 
   } 
   .modal-backdrop.in { 
       opacity: 0; 
   } 
   .modal { 
       z-index: inherit !important; //<--overwrite modal default z-index: 1050 
       position: relative; //<change position from absoulte 
   } 
   

所以最终代码会

JS

$(document).ready(function() { 
    $('#myModal').on('show.bs.modal', function() { 
     var mod = $('.modal'); 
     $('.insidemodal').html(mod); 
    }); 
}); 

CSS

.title { 
    background: green; 
    color:#fff; 
    padding: 5px; 
    text-align:center; 
    border:1px solid; 
} 
.menu { 
    background: blue; 
    color:#fff; 
    padding: 5px; 
    text-align:center; 
    border:1px solid; 
} 
.insidemodal { 
    background: red; 
    border:1px solid; 
    padding: 5px; 
} 
.modal-backdrop { 
    display:none 
} 
.modal-backdrop.in { 
    opacity: 0; 
} 
.modal { 
    z-index: inherit !important; 
    position: relative; 
} 

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12"> 
      <div class="title">This Is Title</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-4"> 
      <div class="menu">Left Menu 
       <br> 
       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button> 
      </div> 
     </div> 
     <div class="col-sm-8"> 
      <div class="insidemodal"></div> 
     </div> 
    </div> 
</div> 
<!-- Modal --> 
<div class="modal fade" id="myModal"> 
    <div class="modal-dialog modal-sm"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> 
<span class="sr-only">Close</span> 

       </button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 

      </div> 
      <div class="modal-body">...</div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</div> 

Working Fiddle Example

的SideNote如果您有多个情态动词，上面莫代尔CSS CSS的变化会引起其他模态不正确的行为，因此使用自定义选择，而不是在默认模式选择器中进行更改。