js 标准弹窗设计

前端开发中经常需要弹窗，笔者在个别系统中设计一种标准弹窗，供读者参考

1.弹窗

<script type="text/javascript">
        //pop window functions
        var a_window_id = [];
        var c_hidden_TextEditTextID;
        var color_background, color_fore, color_border, color_title_background;
        var div_width, div_height, div_top, div_left;
        var fontsize_title, fontsize_content, fontsize_bottom;
        //标准弹窗
        function create_pop_window(div_id) {
            if (div_id == null || div_id == undefined) div_id = "div_drag_" + (a_drag_id.length + 1).toString();
            if (a_window_id.length > 0) {
                var nIndex = a_window_id.indexOf(div_id);
                while (nIndex >= 0 && a_window_id.length > 0) {
                    a_window_id.splice(nIndex, 1);
                    nIndex = a_window_id.indexOf(div_id);
                }
            }
            a_window_id.push(div_id);
            var div_class = div_id + "_class";
            //考虑到兼容性，没有采用默认参数
            if (color_background == undefined) color_background = "#F3F3F3";
            if (color_title_background == undefined) color_title_background = "#008899";
            if (color_fore == undefined) color_fore = "#0";
            if (color_border == undefined) color_border = "#008899";
            if (div_width == undefined) div_width = "1024";
            if (div_height == undefined) div_height = "600";
            if (div_top == undefined) div_top = "100";
            if (div_left == undefined) div_left = "100";
            if (fontsize_title == undefined) fontsize_title = "15";
            if (fontsize_content == undefined) fontsize_content = "15";
            if (fontsize_bottom == undefined) fontsize_bottom = "15";
            var c_div_html = "";
            //div_out_begin
            c_div_html += "<div id='" + div_id + "' class='" + div_class + "' style='border:3px solid " + color_border + ";";
            c_div_html += "background-color:" + color_background + "; position: fixed; z-index: 99999999; width:" + div_width + "px;";
            c_div_html += "height:" + div_height + "px; top:" + div_top + "px; left:" + div_left + "px; display: none; border-radius: 6px;'>";

            //div_in_begin
            c_div_html += "<div id='" + div_id + "_in' style=\"position:relative;width:100%; height:" + (parseInt(div_height) - 25).toString() + "px;top:0\">";
            //div_in_title_begin
            c_div_html += "<div id='" + div_id + "_title' style=\"background-color:" + color_title_background + ";color:#FFFFFF;font-size:" + fontsize_title + "px;position:relative;width:100%; height:30px;top:0px\">";
            //div_in_title_name
            c_div_html += "<div id='" + div_id + "_title_name' style=\"position:relative;vertical-align:middle;width:" + (parseInt(div_width) - 50).toString() + "px; height:30px;top:5px;left:0px;\"><div id='" + div_id + "_title_left'>title</div></div>";
            //div_in_title_close
            c_div_html += "<div id='" + div_id + "_title_close' style=\"text-align:center;position:relative;overflow: hidden;width:50px;height:30px;top:-25px;left:" + (parseInt(div_width) - 50).toString() + "px;cursor:pointer;\" onclick=\"drag_close('" + div_id + "');\">关闭</div>";
            //div_in_title_end
            c_div_html += "</div>";
            //div_in_content_begin
            c_div_html += "<div id='" + div_id + "_in_content' style=\"width:100%; height: " + (parseInt(div_height) - 55).toString() + "px;top:30px;font-size:" + fontsize_content + "px;\">";
            //内容
            c_div_html += "<div id='" + div_id + "_in_content_html' style='overflow:scroll;height:" + (parseInt(div_height) - 55).toString() + "px;'>content</div>";
            //div_in_content_end
            c_div_html += "</div>";

            //div_in_end
            c_div_html += "</div>";

            //div_out_bottom_begin
            c_div_html += "<div id='" + div_id + "_bottom' style=\"position:relative;background-color:" + color_title_background + ";color:#FFFFFF;width:100%; height:25px;top:" + (parseInt(div_height) - 25).toString() + ";font-size:" + fontsize_bottom + "px;\">";
            c_div_html += new Date();
            //div_out_bottom_end
            c_div_html += "</div>";
            //div_out_end
            c_div_html += "</div>";
            $("body").append(c_div_html);
            //user select window
            if (div_id == "div_user_info") {
                var c_title_html = create_user_title();
                document.getElementById(div_id + "_title_left").innerHTML = c_title_html.toString();
                var r_html = "";
                r_html = get_user_list();
                document.getElementById(div_id + "_in_content_html").innerHTML = r_html.toString();
            }
            $("#" + div_id).show();
            setDivMiddle(div_id);
            set_drag(div_id);
            return div_id;
        }

其中的user select window 内容及标题可以根据实际需求替换；

create_user_title()创建标题div内容；

get_user_list()创建用户列表内容；

这里省略。

set_drag开始部分的代码用于检测数组中是否有相同的id，有的话将其移动数组尾部。

弹窗的id自动亚入数组中，主要是方便设置拖曳，实现按id拖曳的代码如下：

<script type="text/javascript">
        //drag functions
        var _reset;
        var _width_0, _height_0;
        function set_drag(dragid) {
            _reset = true;
            _width_0 = parseInt($("#" + dragid).css("width"));
            _height_0 = parseInt($("#" + dragid).css("height"));
            $(function () {
                var _move = false;
                var _to_rightborder = false, _to_bottomborder = false;
                var _x, _y;
                var _x_max, _y_max;
                var _width, _height;
                var x, y;
                var _top, _left;
                var expand = 2;

                $("#" + dragid).click(function () {
                }).mousedown(function (e) {
                    //alert(cdragclass);
                    var _x_left = parseInt($("#" + dragid).css("left"));
                    var _y_top = parseInt($("#" + dragid).css("top"))
                    _x = e.pageX - _x_left;
                    _y = e.pageY - _y_top;
                    _x_max = $(window).width() - _x_left - expand;
                    _y_max = $(window).height() - _y_top - expand;
                    if (e.pageY - _y_top <= 40 && _x >= 120) {
                        _move = true;
                        _top = _y; _left = _x;
                        _to_rightborder = false;
                        _to_bottomborder = false;
                    }
                    else {
                        _move = false;
                        if (_x <= _width + expand && _x >= _width - expand) {
                            _to_rightborder = true;
                        }
                        if (_y <= _height + expand && _y >= _height - expand) {
                            _to_bottomborder = true;
                        }
                    }
                });
                $("#" + dragid).dblclick(function () {
                    if (_reset == false) {
                        _move = false;
                        $("#" + dragid).css("cursor", "default");
                        $("#" + dragid).css({ width: _width_0 });
                        $("#" + dragid).css({ height: _height_0 });
                        _to_rightborder = false;
                        _to_bottomborder = false;
                        _reset = true;
                    }
                });
                $(document).mousemove(function (e) {
                    _width = parseInt($("#" + dragid).css("width"));
                    _height = parseInt($("#" + dragid).css("height"));
                    _x = e.pageX - parseInt($("#" + dragid).css("left"));
                    _y = e.pageY - parseInt($("#" + dragid).css("top"));
                    if (_move) {
                        x = e.pageX - _left;
                        y = e.pageY - _top;
                    }
                    //光标处理
                    var a_cursor = ["default", "move", "e-resize", "s-resize", "se-resize"];
                    var n_cursor = 0;
                    var n_cursor_e = 0;
                    var n_cursor_s = 0;
                    if (_y <= 40)
                        n_cursor = 1;
                    else {
                        n_cursor_e = 0;
                        n_cursor_s = 0;
                        if (_x <= _width + expand && _x >= _width - expand)
                            n_cursor_e = 2;
                        if (_y <= _height + expand && _y >= _height - expand)
                            n_cursor_s = 3;
                        if (n_cursor_e * n_cursor_s > 0)
                            n_cursor = 4;
                        else
                            n_cursor = n_cursor_e + n_cursor_s;
                    }
                    //$("._XY").html(n_cursor.toString());
                    $("#" + dragid).css("cursor", a_cursor[n_cursor]);
                    if (_move) {
                        $("#" + dragid).css({ top: y, left: x });
                    }
                    else {
                        _reset = false;
                        if (_to_rightborder) {
                            if (_x < _x_max && _x > 100) {
                                $("#" + dragid).css({ width: _x });
                            }
                        }
                        if (_to_bottomborder) {
                            if (_y < _y_max && _y > 100) {
                                $("#" + dragid).css({ height: _y });
                            }
                        }
                    }
                }).mouseup(function () {
                    _move = false;
                    _to_rightborder = false;
                    _to_bottomborder = false;
                });
            });
        }
        
    </script>

按id拖曳的代码实现了所有弹窗的拖曳，不分前后。