使用jQuery，模擬彈出框alert，樣式模仿iphone的彈出框，兼容手機(jī)、ie、火狐、chome等瀏覽器。效果如下：

alert

主要使用jQuery的resize和scroll事件，每當(dāng)滑動(dòng)瀏覽器的滾動(dòng)條，或者頁面重新縮放時(shí)，重新定位彈出框的位置，使對(duì)話框能夠位于頁面的正中間：

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樣式。

調(diào)用如下：

JavaScript
1
2
3
4
5
6
$.myalert({
content: "相關(guān)標(biāo)題",
confirm_btn_click: function (e){ //確認(rèn)按鈕點(diǎn)擊事件
$.myalert("getDialog").mydialog("hide");
}
});