Bootstrap Resizable and draggable Modal

by Johan Pantzare

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<!-- Button trigger video modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalVideo">
  Start video course
</button>

<!-- Button trigger course modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalCBT">
  Start CBT course
</button>

<!-- Modal-video -->
<div class="modal fade" id="myModalVideo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      <div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="http://placehold.it/16x9"/>
        <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
    </div>
    
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal-course -->
<div class="modal fade" id="myModalCBT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button"...

CSS

.modal-content.ui-resizable {
  
}

html,body        {height:100%; padding:0px;}

.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}

.modal.modal-wide .modal-dialog {
  width: 100%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

/* irrelevant styling */
body { text-align: center; }
body p { 
  max-width: 400px; 
  
}

.modal-body{
  padding: 0px;
}
#tallModal .modal-body p { margin-bottom: 900px }

JavaScript

$(".modal-content").on("show.bs.modal", function() {
  var height = $(window).height() - 100;
  $(this).find(".modal-body").css("max-height", height);
});

 $(this).find('.modal-content').css({width:'auto',
                               height:'auto', 
                              'max-height':'100%'});


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

$('#myModal').on('show.bs.modal', function () {
    $(this).find('.modal-body').css({
        'max-height':'100%'
    });
});