I need help figuring out how to prevent my bootstrap modal from being dragged outside of its parent container. Is there a way to constrain the modal within its parent?
$(document).ready(function() {
ShowValidationResult();
});
function ShowValidationResult() {
$('#ValidationResultsWrapper').modal({
keyboard: false,
show: true,
backdrop: false
});
// Using jQuery draggable
$('#ValidationResultsWrapper .modal-dialog').draggable({
handle: ".modal-header"
});
}#ValidationResultsWrapper {
border: 1px solid black;
background-color: white;
}
.modal-dialog {
width: 400px !important;
}
#ValidationResults {
margin-top: 5px;
border: 1px solid black;
background-color: white;
height: 200px;
width: 100%;
padding: 2px;
}
#ValidationResultsHeader {
width: 100%;
background-color: lightgrey;
padding-left: 5px;
}
#ValidationResultsWrapper .modal-body {
padding: 5px;
}
#wrapper {
width: 650px;
height: 700px;
border: 1px solid black;
margin-top: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="wrapper">
<div id="ValidationResultsWrapper" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header alert-primary" style="color: white; background-color: #003366; background-image: none, linear-gradient(rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Just text
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>