BeAlert
这是一个美化版的alert和confirm弹出框插件,适用于IE7+、chrome、Edge、fireFox、Safari等绝大多数浏览器。 功能可自己拓展,这里只是一个基础版本的插件 ,能够取代系统自带的alert和confirm。
How to use?
1、需要jquery的支持,所以请先确认已经引入jquery文件;
1
|
<
script
src
=
"jquery.min.js"
></
script
>
|
2、添加css和js文件到你的页面中
1
2
|
<
link
rel
=
"stylesheet"
href
=
"BeAlert.css"
>
<
script
src
=
"BeAlert.js"
></
script
>
|
3、按说明调用函数
1
2
|
beAlert(title,message,callback,config);
beConfirm(title,message,callback,config);
|
Settings
参数 | 默认值 | 描述 |
---|---|---|
title | null | 标题 |
message | null | 内容 |
callback | null | 回调函数 |
config | null | 配置参数: width: 宽度, height: 最小高度, type: 'warning'|'error'|'success'|'info'|'question', showConfirmButton: 是否显示确认按钮, showCancelButton: 是否显示取消按钮, confirmButtonText: '确认', cancelButtonText: '取消' |
Example
<script type="text/javascript">
$(function () {
$("#alert").click(function () {
beAlert("Hello world!", "welcome to my world :)", function () {
//after click the confirm button, will run this callback function
}, {type: 'success', confirmButtonText: 'OK'});
});
$("#confirm").click(function () {
beConfirm("Are you sure?", "You will not be able to recover this imaginary file!", function (isConfirm) {
if (isConfirm) {
//after click the confirm
} else {
//after click the cancel
}
}, {confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel plx!', width: 400});
});
});
</script>
BeAlert.js(优化适配Phone)
没有用原有的alert因为IOS限制了修改系统方法
/**
* Created by Luker on 2016/10/31.
× Modify by Kong on 2017/04/17
*/
if (typeof $ === 'function') {
$(function() {
var BeAlert = {
defaultConfig: {
width: $(window).width() <= 320 ? 260 : 320,
height: 170,
timer: 0,
type: 'warning',
showConfirmButton: true,
showCancelButton: false,
confirmButtonText: '确认',
cancelButtonText: '取消'
},
html: '<div class="BeAlert_box">' +
'<div class="BeAlert_image"></div>' +
'<div class="BeAlert_title"></div>' +
'<div class="BeAlert_message"></div>' +
'<div class="BeAlert_button">' +
'<button class="BeAlert_cancel"></button>' +
'<button class="BeAlert_confirm"></button>' +
'</div>' +
'</div>',
overlay: '<div class="BeAlert_overlay"></div>',
open: function(title, message, callback, o) {
var opts = {},
that = this;
$.extend(opts, that.defaultConfig, o);
$('body').append(that.html).append(that.overlay);
var box = $('.BeAlert_box');
box.css({
'width': opts.width + 'px',
'min-height': opts.height + 'px'
});
$('.BeAlert_image').addClass(opts.type);
title && $('.BeAlert_title').html(title).show(),
message && $('.BeAlert_message').html(message).show();
var confirmBtn = $('.BeAlert_confirm'),
cancelBtn = $('.BeAlert_cancel');
opts.showConfirmButton && confirmBtn.text(opts.confirmButtonText).show(),
opts.showCancelButton && cancelBtn.text(opts.cancelButtonText).show();
$('.BeAlert_overlay').die('click').live('click', function() {
that.close();
});
confirmBtn.die('click').live('click', function() {
that.close();
typeof callback === 'function' && callback(true);
});
cancelBtn.die('click').live('click', function() {
that.close();
typeof callback === 'function' && callback(false);
});
setBeAlertPosition();
},
close: function() {
$(".BeAlert_overlay,.BeAlert_box").remove();
}
};
window.beAlert = function(title, message, callback, opts) {
BeAlert.open(title, message, callback, opts);
};
var _confirm = window.confirm;
window.beConfirm = function(title, message, callback, opts) {
opts = $.extend({ type: 'question', showCancelButton: true }, opts);
if (typeof callback === 'function') {
BeAlert.open(title, message, callback, opts);
} else {
return _confirm(title);
}
};
window.setBeAlertPosition = function() {
var box = $('.BeAlert_box');
var h = box.height();
var w = box.width();
//重算top和left
//40是css,Padding了2个20
box.css({
'top': ($(window).height() - h - 40) / 2,
'left': ($(window).width() - w - 40) / 2
});
}
});
}
.BeAlert_overlay {
overflow: hidden;
position: fixed;
margin: 0;
padding: 0;
z-index: 9999;
background: url("overlay.png");
left: 0;
right: 0;
top: 0;
bottom: 0;
width: auto;
height: auto;
}
.BeAlert_box {
position: fixed;
top: 50%;
left: 50%;
background-color: #fff;
border-radius: 5px;
padding: 20px;
z-index: 10000;
font-family: 微软雅黑;
font-size: 12px;
text-align: center;
}
.BeAlert_box .BeAlert_image {
background: #fff;
width: 60px;
height: 60px;
margin: 10px auto;
}
.BeAlert_box .BeAlert_image.warning {
background: url("warning.png");
background-size: 60px;
}
.BeAlert_box .BeAlert_image.error {
background: url("error.png");
background-size: 60px;
}
.BeAlert_box .BeAlert_image.info {
background: url("info.png");
background-size: 60px;
}
.BeAlert_box .BeAlert_image.question {
background: url("question.png");
background-size: 60px;
}
.BeAlert_box .BeAlert_image.success {
background: url("success.png");
background-size: 60px;
}
.BeAlert_box .BeAlert_title {
font-size: 20px;
margin: 5px auto;
}
.BeAlert_box .BeAlert_message {
font-size: 14px;
margin: 5px auto;
}
.BeAlert_box .BeAlert_button {
margin-top: 20px;
}
.BeAlert_box .BeAlert_button button {
display: none;
background-color: #8CD4F5;
color: #fff;
border: none;
box-shadow: none;
font-size: 17px;
font-weight: 500;
-webkit-border-radius: 4px;
border-radius: 5px;
padding: 10px 30px;
cursor: pointer;
margin: 0 10px;
outline: none;
}
.BeAlert_box .BeAlert_button button.BeAlert_cancel {
background-color: #c1c1c1;
}
.BeAlert_box .BeAlert_button button.BeAlert_cancel:hover {
background-color: #b9b9b9;
}
.BeAlert_box .BeAlert_button button.BeAlert_confirm:hover {
background-color: #86CCEB;
}
error
info
overlay
question
success
warning