可调整大小的Bootstrap 4模态列对模态调整大小不起作用

如何解决可调整大小的Bootstrap 4模态列对模态调整大小不起作用

我有一个模态，已经成功地将其设置为可拖动和可调整大小。我希望用户能够移动和调整模式的大小，并仍然可以访问页面上的主要内容。我遇到一个问题，就是模式列对浏览器窗口的整体大小而不是模式的大小做出反应，并且列断点没有在模式内部调整大小。

$(document).ready(function () {
    radarPageHandlers();
    window.scroll(0,document.documentElement.scrollHeight);
    $("#smaplemodal").modal('show');

    //draggable
    $("#smaplemodal").draggable({
        handle: ".modal-header"
    });

    //resizable
    $('.modal-content').resizable({
        //alsoResize: ".modal-dialog",minHeight: 200,minWidth: 300
    });

    //$("#radarMap").css("height",window.screen.height * .60);
    //$("#radarMap").css("width","100%");
});

function toggleModal(){
    $("#smaplemodal").modal('show');
}

function radarPageHandlers() {
    $('#radarContainer').on('click',function(event) {
        $('#radarMap').css('pointer-events','auto');
    });

    $('#radarContainer').mouseleave(function(event) { 
        $('#radarMap').css('pointer-events','none'); 
    }); 
}

function collapseModal(){
    $("#smaplemodal").modal('hide');
}

.radarMap {
  position: absolute;
  top: 0%;
  left: 0%;
  min-height: 100vh !important;
  width: 100%;
}

.overlay {
  width: 100%;
  height:100%;
  position:relative;
}
.overlay1 {
   z-index: 1;
   position:absolute;
   left: 50%;
   bottom: 10%;
   transform: translate(-50%,-50%);
   width: 40px;
   height: 20px;
}

.btn-circle.btn-xl { 
  width: 70px; 
  height: 70px; 
  padding: 10px 16px; 
  border-radius: 35px; 
  font-size: 12px; 
  text-align: center; 
} 

.modal-dialog{
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="radarDiv">  
    <div class="row">
        <div class="col-12 overlay" id="radarContainer">
            <iframe id="radarMap" class="embed-responsive-item rounded text-center" src="https://placekitten.com//" style="border: 0px solid #000000; border-radius: 0px; min-height: 75vh !important; width: 100%;"  name="myiFrame" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" allowfullscreen></iframe>
            <div class="overlay1">
                <button type="button" class="btn btn-warning btn-circle btn-xl" style="background-color: #00a8e0; color: white;" onClick="toggleModal()"><i class="fas fa-plus fa-3x"></i></button> 
            </div>
        </div>
    </div>
</div>