【jQuery】jQuery弹出框可拖拽移动

忘是亡心i 2022-10-07 06:48 249阅读 0赞

#### 1.说明 ####

此demo需要用到jQuery和bootstrap，使用前需要先引入相关文件  
因为内容比较简单，所以就不多说明了

#### 2.相关代码 ####

位置排版使用了绝对定位，部分是写死的，实际情况应该修改为动态自适应

<div id="windowWithdraw">
        <div id="windowTitle">
            <span id="windowClose">关闭</span>
            <div>提现状态重置</div>
        </div>
        <windowFrom>
            这是一个弹出框
        </windowFrom>
    </div>

#windowWithdraw { 
        border: 1px solid #2e2e2e;
        /* width: 720px; */
        height: 700px;
        background-color: white;
        border-radius: 5px;
        margin-left: 30px;
        margin-top: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -360px;
        margin-top: -350px;
        display: none;
        z-index: 1500;
        padding-right: 0 !important;   /* 此处是因为bootstrap会带来padding-rught:17px */
    }
    
    #windowFrom { 
        padding: 50px;
    }
    
    #windowClose { 
        float: right;
    }
    
    #windowClose:hover { 
        color: red;
        cursor: pointer;
    }
    
    #windowTitle { 
        background-color: #343a40;
        font-size: 14px;
        padding: 4px;
        cursor: move;
        color: white;
    }

// 该方法弹窗并进入模态，在需要的地方调用此方法
    function showWindowWithdraw(data) { 
        $('#windowWithdraw').css({ 
            left: "50%",
            top: "50%",
            "margin-left": "-360px",
            "margin-top": "-350px"
        })
        $('#windowWithdraw').modal('show')
        $('#windowWithdraw').show();
    }
    // 点击关闭按钮
    $('#windowClose').click(function() { 
        hideWindowWithdraw()
    });
    
    // 按下鼠标移动弹窗位置
    $('#windowTitle').mousedown(function(event) { 
        var isMove = true;
        $(document).mousemove(function(event) { 
            if (isMove) { 
                var obj = $('#windowWithdraw');
                obj.css({ 
                    'left': event.pageX,
                    'top': event.pageY + 330
                });
            };
        }).mouseup(function(event) { 
            isMove = false;
        });;
    });
    
    //点击其他区域隐藏窗口
    $(document).mouseup(e => { 
        let window = $('#windowWithdraw');
        $(document).click(function(e) { 
            var drag = $("#windowWithdraw"),
                dragel = $("#windowWithdraw")[0],
                target = e.target;
            if (dragel !== target && !$.contains(dragel, target)) { 
                hideWindowWithdraw()
            }
        });
    });
    // 隐藏模态框
    function hideWindowWithdraw() { 
        $('#windowWithdraw').modal('hide')
        $('.modal-backdrop').remove(); //去掉遮罩层
        $('#windowWithdraw').hide();
    }

**提示**：在弹窗内有点击按钮，可能会存在冒泡影响，可以适当阻止冒泡事件