Question

我有一个我想要拖动的引导模式。对于draggable我尝试使用包含限制它，但是当第一次执行拖动操作时它会消失。这是我的代码。

＆＃13;

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

＆＃13;

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

＆＃13;

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，并使用modal 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 -->

问候！

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

2 个答案: