有的时候弹框需要根据浏览器大小变化来自适应大小,这样可以提供给用户很好的浏览体验
实现方式如下:
//最小宽度及高度及显示的比例按照自己需要更改
function initDialogArea(obj,minWidth,minHeight) {
if (!!obj ) {
var flag = $(obj).data("flag");
if (!!flag) {
return;
}
$(window).on("resize", function () {
try {
var win_h = $(window).height();
var win_w = $(window).width();
var height = Math.floor(win_h * 0.8);
var width = Math.floor(win_w * 0.8);
height = height - minHeight > 0 ? height : minHeight||200;
width = width - minWidth > 0 ? width : minWidth||200;
var top = Math.floor((win_h - height) * 0.5)
var left = Math.floor((win_w - width) * 0.5)
var options = $(obj).dialog('options');
if (options != null) {
$(obj).dialog({
width: width,
height: height,
top: top,
left: left
});
//或
/* $(obj).dialog({
width: width,
height: height
}).dialog("center");
*/
$(obj).data("flag", true);
}
} catch (e) {
return false;
}
}).trigger("resize");
}
}