更改alert样式
JS调用
<script type="text/javascript">
function _alert() {
win.alert('系统提示', '这是alert效果!');
}
function _confirm() {
win.confirm('系统提示', '确定这是confirm效果吗?', function (r) {
win.alertEx('结果:' + (r ? "是" : "不是"))
});
}
function _openDlg() {
win.open(600, 400, 'window.js例子', '/');
}
</script>
JS
var win = new function () {
// 确认框和提示框宽度
this.width = 400;
// 确认框和提示框高度
this.height = 200;
// 手动关闭窗体
this.close = function () {
$('.win iframe').remove();
$('.win').remove();
};
// 打开窗体
this.open = function (width, height, title, url, closed) {
this._close = function () {
this.close();
if ($.isFunction(closed)) closed();
};
var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close();" class="close-btn" title="关闭">×</a><iframe class="body-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" src=""></iframe></div></div>';
var jq = $(html);
jq.find(".window-panel").height(height).width(width).css("margin-left", -width / 2).css("margin-top", -height / 2);
jq.find(".title").find(":header").html(title);
jq.find(".body-panel").height(height - 36).attr("src", url);
jq.appendTo('body').fadeIn();
$(".win .window-panel").focus();
};
// 显示消息框
function messageBox(html, title, message) {
win.close();
var jq = $(html);
jq.find(".window-panel").height(win.height).width(win.width).css("margin-left", -win.width / 2).css("margin-top", -win.height / 2);
jq.find(".title-panel").height(win.height);
jq.find(".title").find(":header").html(title);
jq.find(".body-panel").height(win.height - 36);
jq.find(".content").html(message.replace('\\r\\n', '<br/>'));
jq.appendTo('body').show();
$(".win .w-btn:first").focus();
}
// 确认框
this.confirm = function (title, message, selected) {
this._close = function (r) {
this.close();
if ($.isFunction(selected)) selected(r);
};
var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel">' +
'<iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">' +
'</iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close(false);" class="close-btn" title="关闭">' +
'×</a><div class="body-panel"><p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="win._close(true);">确定</button>' +
'<button class="w-btn" onclick="win._close(false);">取消</button></p></div></div></div>';
messageBox(html, title, message);
};
// 提示框
this.alert = function (title, message, closed) {
this._close = function () {
this.close();
if ($.isFunction(closed)) closed();
};
var html = '<div class="win"><div class="mask-layer">' +
'</div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">' +
'</iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close();" class="close-btn" title="关闭">×' +
'</a><div class="body-panel"><p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="win._close();">确定</button></p>' +
'</div></div></div>';
messageBox(html, title, message);
}
// 提示框
this.alertEx = function (message) {
this.alert('系统提示', message);
}
};
css
.win {
display: none;
}
.mask-layer {
position: fixed;
width: 100%;
height: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
background-color: black;
z-index: 99998;
top: 0px;
left: 0px;
}
.window-panel {
position: fixed;
z-index: 99999;
top: 50%;
left: 50%;
background-color: white;
border-radius: 4px;
}
.window-panel .title-panel {
position: absolute;
height: 36px;
width: 100%;
border-radius: 4px 4px 0 0;
}
.window-panel .title {
position: absolute;
height: 36px;
width: 100%;
text-align: center;
border-radius: 4px 4px 0 0;
line-height: 36px;
vertical-align: middle;
background-color: whitesmoke; /*标题背景色*/
border-bottom: 1px solid rgb(233, 233, 233);
z-index: 1;
}
.window-panel h3 {
font-size: 16px;
margin: 0;
line-height: inherit;
}
.window-panel .close-btn {
display: block;
text-align: center;
vertical-align: middle;
position: absolute;
width: 36px;
height: 36px;
line-height: 36px;
right: 0px;
text-decoration: none;
font-size: 24px;
color: black;
background-color: #DBDBDB;
border-radius: 2px;
z-index: 1;
}
.window-panel .close-btn:hover {
background-color: #ccc;
}
.window-panel .body-panel {
position: absolute;
width: 100%;
top: 36px;
border-radius: 0 0 4px 4px;
z-index: 1;
}
.window-panel .content, .window-panel .btns {
text-align: center;
}
.window-panel .content {
padding: 18px 5px 0px 5px;
font-size: 16px;
min-height: 40px;
line-height: 22px;
}
.window-panel .w-btn {
display: inline-block;
width: 60px;
height: 26px;
line-height: 26px;
background-color: #18a5cb;
color: white;
cursor: pointer;
text-align: center;
border-radius: 2px;
text-decoration: none;
margin: 0 10px 0px 10px;
border: none;
}
.window-panel .w-btn:hover {
background-color: #127995;
}
.window-panel .w-btn:focus {
outline: 0 none;
}