如何在容器 div 中显示 bootstrap v4 模态框？答案

【问题标题】：How to show bootstrap v4 modal box inside a container div?如何在容器 div 中显示 bootstrap v4 模态框？
【发布时间】：2016-01-15 08:49:34
【问题描述】：

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

我尝试改变一些内置的 CSS 类和一些 JavaScript :) 比如：

z-index: 1051;

更改右侧导航栏但不满意，有什么简单的解决方案吗？

【问题讨论】：

使用 css 设置模型的position
如果你想要一个静态 div 中的模态框，也许你应该使用面板。 getbootstrap.com/components/#panels
是的，我尝试了面板，但不工作。
“不工作”是什么意思？
我的意思是我试过但没用

标签： javascript jquery css twitter-bootstrap bootstrap-4

【解决方案1】：

创建一个变量var mod并在其中加载模态；
```
var mod = $('.modal');
```
在要显示模态的容器内创建一个 div <div class="insidemodal"></div>

使用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
});

在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
}

所以最终代码将是

$(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

旁注如果您有多个模态框，Modal CSS 中的上述 CSS 更改可能会导致其他模态框无法正常运行，因此请使用自定义选择器而不是更改默认模态选择器。

【讨论】：