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

Question

我有一个引导模态，希望可以拖动。 对于可拖动对象，我尝试限制它的使用，但是当第一次执行拖动操作时，它会消失。 这是我的代码。

 $("#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 45.0.2版

在全屏模式下运行代码（运行代码段后查看全页）以重现此问题。 似乎模式对话框正在移到顶部（在正常模式下运行时）。

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>

为模式和可拖动div给出两个不同的ID，并使用模式ID作为包含父对象

Answer 2

试试这个片段。 希望这会帮助你。

 $(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 --> 

问候！