bootstrap 使用包含选项拖动时模态消失

Question

我有一个 bootstrap 模式，我希望它可以拖动。对于可拖动，我尝试使用 containment 来限制它，但是当第一次完成拖动操作时它会消失。这是我的代码。

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

试试这个片段。希望对您有所帮助。

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

您好！

Answer 2

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

为模态和可拖动提供两个不同的 id div 并使用模态 id 作为包含父级

bootstrap 使用包含选项拖动时模态消失

bootstrap modal disappearing when dragging with containment option

javascript

jquery

jquery-ui

jquery-ui-draggable

bootstrap-modal