Draggable modal Bootstrap 3

by megaadriano

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="side-menu" id="sideMenu">
    <menu>
        <ul class="nav nav-tabs nav-stacked">
            <li><a href="#myModal" data-backdrop="false" data-toggle="modal">Click Me</a>
            </li>
        </ul>
    </menu>
</div>
<div id="myModal" class="modal fade in modalM">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Settings</h4>

            </div>
            <div class="modal-body">
                <p>Settings</p>
            </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>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div id="myModal2" class="modal show  bottomM ">
    <div class="modal-dialog">
        <div class="modal-content">
           
            <div class="modal-body">
              <p><h4><b>Legenda</b></h4></p>
            </div>
           
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

CSS

.modal
{

 position:absolute !important;
  bottom: auto;
  overflow: hidden;
    margin-right: 0 !important;
  margin-left: 0 !important;
}
.modal-dialog{
    margin-right: 0 !important;
    margin-left: 0 !important;
      overflow: hidden;
}
.bottomM{
  position:absolute !important;
  left:auto !important;
  right:5vw !important;
  top:60vh !important;
 
  margin-right: 0 !important;
  margin-left: 0 !important;
  overflow: hidden !important;
}

.modalM{
       right: auto;
  bottom: auto;
  overflow: hidden;
}

JavaScript

$("#myModal").draggable({
      handle: ".modal-header"
  });
    $("#myModa2").draggable({
      handle: ".modal-header"
  });