使用包含选项拖动时，引导模态消失

Question

I have a bootstrap modal that I want to be draggable. For draggable I tried to restrict it using, containment but it disappears when drag action is done for the first time. Here is my code.

 $("#feedbackdialog").modal(); $('#feedbackdialog').draggable({ handle: ".modal-header", cursor: "crosshair", containment: "parent" }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <div id="feedbackdialog" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Comment</h4> </div> <div class="modal-body"> <div class="active" id="segtab"> <div align="center" class="form group row"> <textarea id="fdtext" class="form-control form-group" placeholder="Sentence Comment here"></textarea> <button id="savefdb" class="btn">OK</button> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

Firefox version 45.0.2

Run the code in full screen mode(View Full page after running the code snippet) to reproduce the issue. It seems that that modal dialog is moving to top(when run in normal mode).

Answer 1

<div class=" modal fade "  id="modalid"  tabindex="-1" role="dialog">
  <div class="modal-dialog" id="feedbackdialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Comment</h4>
      </div>
      <div class="modal-body">
        <div class="active" id="segtab">
          <div align="center" class="form group row">
            <textarea id="fdtext" class="form-control form-group" placeholder="Sentence Comment here"></textarea>
            <button id="savefdb" class="btn">OK</button>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
     $("#modalid").modal();
    $('#feedbackdialog').draggable({
      handle: ".modal-header",
      cursor: "move",

      containment: "parent"
    });
    </script>

Give two different id's for modal and draggable div and use modal id as containment parent

Answer 2

Try this snippet. Hope this will help you.

 $(function(){ $("#myModal").draggable({ handle: ".modal-dialog" }); }); 

 .modal { overflow: hidden; height:250px; width:300px; } .modal-dialog{ margin-right: 0; margin-left: 0; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.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"> <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> <!-- /.modal --> 

Greetings!