JavaScript自定义模拟alert弹出提示框

参考：

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

alert

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

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);
};

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

调用如下：

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

$.myalert({

content: "相关标题",

confirm_btn_click: function (e){ //确认按钮点击事件

$.myalert("getDialog").mydialog("hide");

}

});

Demo：演示地址

下载：查看下载

发表评论 取消回复

发表评论取消回复