【jQuery】jQuery弹出框可拖拽移动-蒲公英云

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

忘是亡心i 2022-10-07 06:48 316阅读 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();
}