Bootstrap Modal：使主体内容全模态

Question

我正在努力在Web应用程序上创建一个“缩放”选项，该选项会将（google）图表复制到模式中，但是我希望图表扩展到模式的整个宽度。

我的普通香草模式：

<div class="container-fluid">
      <div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="chartModalTitle">-</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div id='modalBody' class="modal-body">-</div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>

以及我用来从文档中抽出图表的Javascript：

$('.modal-chart').dblclick(function() {
    let chartTitle = this.children.item(0).innerText;
    let chartDiv = this.children.item(1).id;
    chartDiv = '#' + chartDiv;
    $('#chartModal').find('.modal-title').text(chartTitle);
    $('.modal-body').html($(chartDiv).html());
    $('#chartModal').modal('show');
})

我想知道在哪里应用一些CSS以使图表填充模式的宽度：

Answer 1

您可以相对于父级div定位，而绝对子级

.modal-body{
 Position:relative;
}
 $(chartDiv).css({top:'0';right:'0';bottom:'0';left:'0';})