js、DOM自定义类似alert()可拖拽、可编辑消息内容、标题、窗体宽度、窗体高度、弹窗关闭后执行函数操作

function myMsg(msg_content, msg_title, msg_width, msg_height, define_callback) {
    //自定义提示消息弹框
    //msg_content：提示内容。msg_title：提示标题。msg_width：提示宽度。msg_height：提示高度。define_callback：点击确定后执行函数。
    //调用
    //myMsg('连接数据库成功');
    /*myMsg('连接数据库成功', '提示：', '250px', '170px', function() {
        myMsg('第二个', '警告', '300px', '200px', function() {
            console.log(2);
        })
    });*/
    var msg_window = `<div class="msg_window" style="display: block; position: fixed; left: 0; top: 0; z-index: 9999999999; width: 100%; height: 100%;">
            <div class="msg_window_win" style="width: 300px; min-height: 150px; max-width: calc(100vw - 60px); max-height: 400px; display: block; overflow: hidden; position: relative; margin: 0 auto; top: 20%; border: solid 7px #0099FF; border-radius: 10px/10px;">
                <div class="msg_window_head" style="position: absolute; width: 100%; height: 30px; background-color: #0099FF;">
                    <div class="msg_window_title" style="position: absolute; padding: 4px 0px 0px 10px; font-size: 13px; font-weight: bold; color: #fff; font-family: arial, helvetica, verdana, sans-serif;">提示</div>
                    <a class="msg_window_close" title="关闭" style="width: 24px; height: 24px; overflow: hidden; border-radius: 50%; background-color: #81C2F0; text-align: center; color: #3892D3; font-size: 18px; font-weight: bold; position: absolute; right: 10px;" onmouseover="this.style.backgroundColor = '#FE3232';" onmouseout="this.style.backgroundColor = '#81C2F0';">✖</a>
                </div>
                <div style="position: absolute; top: 30px; bottom: 30px; width: 100%; overflow: auto; background: #fff; font: normal 13px helvetica, arial, verdana, sans-serif;">
                    <div class="msg_window_main" style="width: calc(100% - 1.6em); height: calc(100% - 1.6em); padding: 10px;">
                        提示信息
                    </div>
                </div>
                <div class="msg_window_foot" style="position: absolute; bottom: 0px; width: 100%; height: 30px; overflow: hidden; padding: 0; background-color: #DFEAF2; border-top: solid 1px #0099FF;">
                    <div style="width: 160px; height: 24px; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto;">
                        <input class="msg_window_foot_define" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; border: 0 none; width: 75px; height: 24px; color: #FFF; text-align: center;  background-color: #0099FF; border-radius: 5px/5px; font-size: 12px; font-weight: bold;" type="button" value="确定" onmouseover="this.style.backgroundColor = '#1B8CD8';" onmouseout="this.style.backgroundColor = '#0099FF';" />
                    </div>
                </div>
            </div>
        </div>`;
    var msg_window_div = document.createElement('div');
    msg_window_div.classList.add('msg_window_div');
    msg_window_div.innerHTML = msg_window;
    document.body.appendChild(msg_window_div);
    //打开自定义提示消息弹框
    if (msg_content) {
        //设置弹框内容
        document.getElementsByClassName('msg_window_main')[0].innerHTML = msg_content;
    } else {
        console.log('请设置好自定义消息弹框信息内容！');
    }
    if (msg_title) {
        //设置弹框标题
        document.getElementsByClassName('msg_window_title')[0].innerHTML = msg_title;
    }
    if (msg_width) {
        //设置弹框宽度
        document.getElementsByClassName('msg_window_win')[0].style.width = msg_width;
    }
    if (msg_height) {
        //设置弹框高度
        document.getElementsByClassName('msg_window_win')[0].style.height = msg_height;
    }
    document.getElementsByClassName('msg_window_foot_define')[0].onclick = document.getElementsByClassName('msg_window_close')[0].onclick = function() {
        //点击“确定”执行某个操作
        document.body.removeChild(document.getElementsByClassName('msg_window_div')[0]);
        if (define_callback) {
            if (typeof(define_callback) == 'function') {
                define_callback();
            } else {
                console.log('请设置好自定义消息弹框信息确定后执行函数！');
            }
        }
    }
    //拖拽提示消息弹框窗口
    dragDiv(document.getElementsByClassName('msg_window_head')[0], {
        target: document.getElementsByClassName('msg_window')[0].children[0]
    });
}

function dragDiv(eleBar, options) {
    //拖拽窗口：eleBar：实行拖拽的标题栏。options：被拖拽的窗口。
    if (!eleBar) {
        return;
    }
    // 默认数据
    var defaults = {
        target: eleBar,
        bounding: window,
        edgeLock: true,
        onMove: function() {},
        onEnd: function() {}
    };

    options = options || {};

    var params = {};
    for (var key in defaults) {
        if (typeof options[key] != 'undefined') {
            params[key] = options[key];
        } else {
            params[key] = defaults[key];
        }
    }

    // 拖拽元素
    var eleTarget = params.target;
    // 限制范围
    var bounding = params.bounding;
    var objBounding = bounding;

    // 事件类型处理
    var objEventType = {
        start: 'mousedown',
        move: 'mousemove',
        end: 'mouseup'
    };

    if ('ontouchstart' in document) {
        objEventType = {
            start: 'touchstart',
            move: 'touchmove',
            end: 'touchend'
        };
    }

    // 坐标存储数据
    var store = {};
    eleBar.addEventListener(objEventType.start, function(event) {
        // IE 拖拽可能拖不动的处理
        if (!window.WeakMap || typeof document.msHidden != 'undefined') {
            event.preventDefault();
        }
        // 兼顾移动端
        if (event.touches && event.touches.length) {
            event = event.touches[0];
        }
        store.y = event.pageY;
        store.x = event.pageX;
        store.isMoving = true;
        store.top = parseFloat(getComputedStyle(eleTarget).top) || 0;
        store.left = parseFloat(getComputedStyle(eleTarget).left) || 0;

        if (params.edgeLock === true && bounding) {
            if (bounding === window) {
                objBounding = {
                    left: 0,
                    top: 0,
                    bottom: innerHeight,
                    right: Math.min(innerWidth, document.documentElement.clientWidth)
                };
            } else if (bounding.tagName) {
                objBounding = bounding.getBoundingClientRect();
            }

            // 拖拽元素的 bounding 位置
            var objBoundingTarget = eleTarget.getBoundingClientRect();

            // 可移动范围
            /*//不可超出浏览器内部
            store.range = {
                y: [objBounding.top - objBoundingTarget.top, objBounding.bottom - objBoundingTarget.bottom],
                x: [objBounding.left - objBoundingTarget.left, objBounding.right - objBoundingTarget.right]
            };*/
            //可超出浏览器内部
            store.range = {
                y: [objBounding.top - objBounding.bottom, objBounding.bottom],
                x: [objBounding.left - objBounding.right, objBounding.right]
            };
        }
    });
    document.addEventListener(objEventType.move, function(event) {
        if (store.isMoving) {
            event.preventDefault();
            // 兼顾移动端
            if (event.touches && event.touches.length) {
                event = event.touches[0];
            }

            var distanceY = event.pageY - store.y;
            var distanceX = event.pageX - store.x;

            // 边界的判断与chuli
            if (params.edgeLock === true && bounding) {
                var minX = Math.min.apply(null, store.range.x);
                var maxX = Math.max.apply(null, store.range.x);
                var minY = Math.min.apply(null, store.range.y);
                var maxY = Math.max.apply(null, store.range.y);

                if (distanceX < minX) {
                    distanceX = minX;
                } else if (distanceX > maxX) {
                    distanceX = maxX;
                }

                if (distanceY < minY) {
                    distanceY = minY;
                } else if (distanceY > maxY) {
                    distanceY = maxY;
                }
            }

            var top = store.top + distanceY;
            var left = store.left + distanceX;

            eleTarget.style.top = top + 'px';
            eleTarget.style.left = left + 'px';

            // 回调
            params.onMove(left, top);
        }
    }, {
        passive: false
    });
    document.addEventListener(objEventType.end, function() {
        if (store.isMoving) {
            store.isMoving = false;

            params.onEnd();
        }
    });
}