Make bootstrap Modal dialog draggable, move up and change header/footer style

I have Modal code:

<!-- Universal Modal -->
<div class="modal fade" id="universalModal"  style="margin-top:-150px;" tabindex="-1" role="dialog" aria-labelledby="universalModalLabel" aria-hidden="true">
  <div class="modal-dialog" style="width:1000px;">                                    
    <div class="modal-content">
      <form role="form" id="universalModalForm">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only"> Close</span></button>
          <h4 class="modal-title" id="universalModalLabel"><span class="glyphicon glyphicon-pencil"></span> Edit<span class="modal-title">.model-title</span></h4>
        </div>
        <div class="alert alert-danger fade in" id="universalModal-alert" style="display: none;">
          <span class="alert-body"></span>
        </div>
        <div class="modal-body">.modal-body</div>
        <div class="modal-footer">
          <input type="hidden" id='stakeholder_id' name='stakeholder_id'>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" id="submitBtn"></button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- End Universal Modal -->
 1) To move  bootstrap Modal dialog up, I used style="margin-top:-150px;" for my id in top div including modal class.
2) To make   bootstrap Modal dialog draggable via modal header, body and footer
                 $('#universalModal').modal('show');
                $('#universalModal .modal-dialog').draggable({
                  handle: ".modal-header, .modal-body, .modal-footer"
                 });
3) To change header and footer style
<style>
  .modal-header  {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 20px;
  }
  .modal-footer {
      background-color: #5cb85c;;
  }
</style>