jquery 模拟 alert 手机，pc，平板 3合一

$.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模拟一个。