Question

你能帮我解释为什么我的模态窗口不可拖动。我正在使用Bootstrap 3.0.3。

我得到的错误是：draggable不是函数

使用下一个链接调用模态：

<a href="#" class="btn btn-info btn-xs" role="button" data-toggle="modal" data-target="#modalContract" id="showModalContract"><span class="glyphicon glyphicon-search"></span>Search</a>

使用下一个代码创建模态窗口：

<div class="modal fade bootstrap-dialog-draggable" id="modalContract" tabindex="-1" role="dialog" aria-labelledby="modalContractLabel" aria-hidden="true" >
  <div class="modal-dialog"  style="width:1200px;height:700px;">
    <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" id="modalContractLabel">Search</h4>
      </div>
      <div class="modal-body" style="height:520px;">
            <iframe src="/contracts/index/" style="width:100%;height:400px;border:0px;"><p>Your browser does not support iframes.</p></iframe>
            <div class="form-group clear">        
            </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
    .modal-header {
        cursor: move;
    }
</style>


<script>
$(document).ready(function() {

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


});
</script>

Answer 1

您调用它的方式，draggable是一个jQuery UI功能。

因此，您需要在页面中包含jQuery UI：https://jqueryui.com/

还有一些不需要jQuery UI的替代bootstrap模态插件，如https://nakupanda.github.io/bootstrap3-dialog/

Answer 2

你可以看到这个代码是可拖动的bootstrap模式

HTML CODE

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

CSS代码

.modal
{
overflow: hidden;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}

JQUERY CODE

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

DEMO

我的Bootstrap模式不可拖动？

2 个答案: