前端开发中经常需要弹窗，笔者在个别系统中设计一种标准弹窗，供读者参考
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拖曳的代码实现了所有弹窗的拖曳，不分前后。
