网页开发中，弹窗还是很有必要的。本人比较喜欢jquery ui的dialog。
但是jquery dialog中也有一些略显不方便的，如：没有z-index的参数设置，脚部的按钮样式没办法自定义……
我自己简单地写了个使用jquery dialog封装函数，有兴趣的朋友看看。
JavaScript（看起来有点多，但放到vs里，ctrl+m+o，还是比较清楚明了的）：
$.ivanjs = $.ivanjs || {};
$.ivanjs.com = $.ivanjs.com || {};
$.ivanjs.com = {
//other function
//弹窗
showWin: function (content, options) {
var contentDiv = content;
//检查传递过来的参数类型是否为Jquery对象
if (!(content instanceof $)) {
//如果是字符串，则构造一个Jquery对象
if (typeof (content) == "string") {
contentDiv = $("<div>" + content + "</div>");
} else {
alert("弹窗内容参数无效，必须为jquery元素对象或者字符串");
return null;
}
}
//默认设置
var _options = {
autoOpen: true,
modal: true,
zIndex: null,
full: false,//是否全屏
destroyEnable: true,
afterOpen: function () {
//打开之后的回调
}
};
//避免为空对象
options = options || {};
//把按钮对象转换为jquery ui能识别的格式参数
var customBtns = options.buttons || [];
options.buttons = {};
for (var i = 0; i < customBtns.length; i++) {
var btnObj = customBtns[i];
options.buttons[btnObj.text] = btnObj.handler || function () {};
}
//调用者的设置优先
_options = $.extend({}, _options, options);
//关闭后的回调
var closeCallback = _options.close;
var isCodeElement = $("body").find(contentDiv).length == 0;
_options.close = function () {
if (closeCallback) {
closeCallback();
}
//如果是用代码构造的jquery元素，则销毁。避免下次构造时页面中反复存在
if (_options.autoOpen && _options.destroyEnable && isCodeElement) {
setTimeout(function () {
contentDiv.remove();
}, 250);
}
};
//初始化之后立即打开的
if (_options.autoOpen && !contentDiv.length) {
alert("弹窗内容要显示的jquery元素不存在，selector：" + contentDiv.selector);
return null;
}
var dialogObj = contentDiv.dialog(_options);
updateDialogStyle();
if (_options.autoOpen && _options.afterOpen) {
_options.afterOpen();
}
//如果是初始化之后，再手动打开的，则添加一个打开的“开关”，供外部使用
dialogObj.open = function () {
if (!dialogObj.length) {
alert("弹窗内容要显示的jquery元素不存在，selector：" + dialogObj.selector);
}
dialogObj.dialog("open");
updateDialogStyle();
if (_options.afterOpen) {
_options.afterOpen();
}
};
return dialogObj;
//应用自定义的样式，更新弹窗样式
function updateDialogStyle() {
var uiDialog = contentDiv.parent(".ui-dialog");
//z-index
if (_options.zIndex) {
uiDialog.css({ "z-index": _options.zIndex });
}
//按钮样式
if (customBtns.length) {
for (var j = 0; j < customBtns.length; j++) {
var cbtn = customBtns[j];
var btnArr = uiDialog.find("button:contains(‘" + cbtn.text + "‘)");
var btn = btnArr;
if (btnArr.length > 1) {
for (var k = 0; k < btnArr.length; k++) {
btn = $(btnArr[k]);
var res = $(btn.children()).filter(function (index) {
return $(this).text() == cbtn.text;
});
if (res.length>0) {
break;
}
}
}
//覆盖全部class样式
if (cbtn.className) {
btn.attr("class", cbtn.className);
}
//增加
if (cbtn.addClass) {
btn.addClass(cbtn.addClass);
}
//移除
if (cbtn.removeClass) {
btn.removeClass(cbtn.removeClass);
}
//内嵌样式
if (cbtn.style) {
for (var styleName in cbtn.style) {
btn.css(styleName, cbtn.style[styleName]);
}
}
//图标
if (cbtn.icon) {
btn.prepend($("<span>" + cbtn.icon + "</span>"));
}
//ko绑定
if (cbtn["data-bind"]) {
btn.attr("data-bind", cbtn["data-bind"]);
}
}
//只需更新一次，然后重置按钮参数变量，避免打开之后反复更新按钮样式
customBtns = [];
}
//宽和高
if (_options.full) {
setFullScreen();
$(window).resize(function () {
setFullScreen();
}).resize();
//全屏样式
function setFullScreen() {
var uiAllWidth = $(window).width() - 20,
uiAllHeight = $(window).height() - 30;
uiDialog.css("width", uiAllWidth);
uiDialog.css("height", uiAllHeight);
uiDialog.css("left", "5px");
uiDialog.css("top", "5px");
var uiFooter = uiDialog.find(".ui-dialog-buttonpane"),
uiHeader = uiDialog.find(".ui-dialog-titlebar"),
uiFooterH = uiFooter.height(),
uiHeaderH = uiHeader.height();
console.log("高：全部" + uiAllHeight + ";头" + uiHeaderH + ";脚" + uiFooterH);
contentDiv.css("height", uiAllHeight - uiHeaderH - uiFooterH - 50);
}
}
else {
var uiWidth = parseInt(uiDialog.css("width")),
winWidth = $(window).width();
if (winWidth <= uiWidth) {
uiDialog.css("width", winWidth - 10);
} else if (_options.width) {
uiDialog.css("width", _options.width);
}
}
}
}
};
栗子-html：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div>
<input type="button" id="openFormDialog_body" value="打开子表单" />
</div>
<div id="dialogform" title="Create new user">
<input type="text" value=" " />
</div>
</body>
</html>
栗子-js：
//测试1：自动弹出
$.ivanjs.com.showWin("yes");
$.ivanjs.com.attachConsole();
//测试2：手动弹窗
var bodyDialog = $.ivanjs.com.showWin($("#dialogform"), {
autoOpen: false,
height: 300,
width: 550,
full: false,
zIndex:999,
modal: true,
buttons: [
{ text: "确认", className: "yourClass", style: { color: "green" },icon:"<fa>123</fa>", "data-bind":"click:myClick", handler: function () { } },
{text:"确认取消"}
],
close: function () {
}
});
呃，如果要运行的话，当然要在示例的html里引入示例js……怎么引用JS，这个就不好说了吧……
另外，console.log，ie9及以下的浏览器不支持哦，以上代码里的console.log只是为了方便调试，可以注释掉的。
时间： 2024-12-29 13:04:44