使用jQuery，模拟弹出框alert，样式模仿iphone的弹出框，兼容手机、ie、火狐、chome等浏览器。效果如下：

alert

主要使用jQuery的resize和scroll事件，每当滑动浏览器的滚动条，或者页面重新缩放时，重新定位弹出框的位置，使对话框能够位于页面的正中间：

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
MyJqDialog.prototype.resizeBox = function () {
var box = this.element;
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(document).width();
//Set height and width to mask to fill up the whole screen
$(this.overlay).css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
var scrollT = $(window).scrollTop();
var scrollL = $(window).scrollLeft();
//Set the popup window to center
box.css('top',  winH/2 - box.height()/2 + scrollT);
box.css('left', winW/2 - box.width()/2 + scrollL);
};

再配合css样式。

调用如下：

JavaScript
1
2
3
4
5
6
$.myalert({
content: "相关标题",
confirm_btn_click: function (e){ //确认按钮点击事件
$.myalert("getDialog").mydialog("hide");
}
});