$.kw = {
title : "System information", //默认标题 可修改
speed : 400, //默认速度 可修改
buttonName : "确定", //确定按钮默认名称 可修改
content : "Content",
//移除遮盖层
del : function () {
$("#alert-layer").remove();
},
//响应ESC键盘退出
esc : function () {
$(document).keyup(function (event) {
if (event.which == 27) {
$.kw.del();
}
});
},
//内容显示功能
alert : function (sContent, sTitle, callBack) {
var title = sTitle || this.title;
var layer = "<div id=‘alert-layer‘><div id=‘alert-container‘><div class=‘alert-top‘></div><div class=‘alert-box‘><div id=‘alert-title‘>" + title + "<div id=‘alert-close‘ title=‘Close‘></div></div><div id=‘alert-content‘>" + sContent + "</div><div class=‘alert-button‘><button id=‘alert-button‘>" + this.buttonName + "</button></div></div><div class=‘alert-bottom‘></div></div></div>";
$(layer).fadeIn(this.speed).appendTo("body");
this.setting();
$("#alert-button").focus();
$("#alert-close").bind("click", this.del); //移除层
$("#alert-button").bind("click", function () {
if (callBack) {
callBack();
}
$.kw.del();
}); //移除层
this.esc();
},
//框拖动功能
move : function () {
$("#alert-title").mousedown(function (event) {
var l = parseInt($("#alert-container").css("left")),
t = parseInt($("#alert-container").css("top"));
x = event.pageX - l;
y = event.pageY - t;
$("body").bind("mousemove", function (event) {
$("#alert-container").css({
"left" : (event.pageX - x)
});
$("#alert-container").css({
"top" : (event.pageY - y)
});
//$("#alert-container").fadeTo(0,0.9)
});
});
$("body").mouseup(function () {
$("body").unbind("mousemove");
//$("#alert-container").fadeTo(0,1)
});
},
//设置背景层与内位置
setting : function () {
var bcw = $(window).width(),
bch = $(window).height(),
bsh = $(document).height(),
aw = $("#alert-container").width() / 2,
ah = $("#alert-container").height() / 2;
$("#alert-layer").css("height", bsh);
$("#alert-container").css({
"top" : bch / 2 - ah,
"left" : bcw / 2 - aw
});
}
//$.kw End
};
$(window).resize(function() {
if($("#alert-layer")){
$("#alert-layer").css("height", 0);
var strheight= $(document).height();
$("#alert-layer").css("height", strheight);
var aw = $("#alert-container").width() / 2,
ah = $("#alert-container").height() / 2;
$("#alert-container").css({
"top" : $(window).height() / 2 - ah,
"left" : $(window).width() / 2 - aw
});
}
});
/*模拟alert样式*/
#alert-layer button:focus {
border: 1px solid #AAA!important;
background: #789!important;
color: white;
outline: none
}
#alert-layer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #333;
line-height: 1;
z-index: 10000;
background: rgba(0,0,0,0.2)
}
#alert-layer #alert-container {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 10px;
width: 30%;
position: fixed;
_position: absolute;
}
#alert-layer .alert-top {
background: #F1F1F1;
height: 10px;
border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
}
#alert-layer .alert-bottom {
background: #F1F1F1;
height: 10px;
border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
}
#alert-layer #alert-title {
font-size: .875em;
height: 30px;
line-height: 25px;
padding: 0 10px;
position: relative;
font-weight: bold;
background: #F1F1F1;
border-bottom: 1px solid #B9B9B9;
}
#alert-layer #alert-close {
background: url(/Images/icon_close.png) no-repeat center center;
width: 25px;
height: 25px;
position: absolute;
cursor: pointer;
right: 2px;
top: 0px;
}
#alert-layer .alert-button {
padding: 5px 10px;
text-align: right;
border-top: 1px solid #B9B9B9;
background: #F1F1F1;
}
#alert-layer #alert-content {
padding: 10px 15px;
font-size:.725em;
}
.alert-box {
background: #fff;
}
#alert-layer button {
padding: 5px;
border: 1px solid #CCC;
margin: auto 5px;
border-radius: 2px;
min-width: 60px;
font-size:.725em;
}
#alert-layer h1, #alert-layer h2, #alert-layer h3, #alert-layer h4 {
margin: 10px auto;
font-size: 1em
}
根据 http://kingwell-leng.iteye.com/blog/1592881 稍微加工一下。主要功劳还是原作者。 贴上代码.
这个段代码 再手机，pc测试均无问题 可直接复制使用。当时在做响应式网站时用到的。pc站的alert 太难看了。所以用jquery模拟一个。
jquery 模拟 alert 手机，pc，平板 3合一