bootstrap实现模态框可移动

<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             data-backdrop="static" onmouseout="removeModalBackdrop()">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 id="userH5">新增用户</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form role="form" class="" id="userForm">
                            <div class="card-body">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</span>
                                    </div>
                                    <input type="text" class="form-control" name="uname" id="uname" value=""
                                           autocomplete="off">
                                </div>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">登录名:</span>
                                    </div>
                                    <input type="text" class="form-control" name="username" id="username" value=""
                                           autocomplete="off">
                                </div>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</span>
                                    </div>
                                    <input type="text" class="form-control" name="password" id="password" value=""
                                           autocomplete="off">
                                </div>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">角&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色:</span>
                                    </div>
                                    <select multiple="multiple" class="chosen-select" id="userChoose"
                                            data-placeholder="选择角色..."></select>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        <button type="button" onclick="userSave()" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </div>
        </div>

调用draggable实现可移动

$('#userModal').draggable();

删除遮罩层

function removeModalBackdrop() {
    $(".modal-backdrop").remove();
}

.content >.modal{
    left: 37%;
    top: 21%;
    width: 500px;
    overflow-y: hidden !important;//取出滚动条
}
.content > #userModal {//设置高度
    height: 440px;
}
.modal-dialog {
    width: auto;
    height: auto;
    margin: 0px 0px 0px 0px;
}

end