引言:在做js前端的时候,很多时候,我们会用到alert来显示提示信息,但是不同的浏览器,alert显示出来的效果也大不相同,尤其是chrom浏览器,显示出来在顶端,用起来很不方便,为此,考虑到信息框的一致性与浏览器的兼容问题,萌生了自己写一个的念头,在此将自己的一个小成果贴出来,抛砖引玉,希望大家多多完善。
首先,看看不同浏览器的显示效果:
chrom
IE8
自己完成后的效果:
这个是基于jquery+CSS+html实现的,主要为:
1、自定义提示内容与标题;
2、自定义提示框样式与大小;
3、提示框在居中显示。
实现代码如下:
function showMsg(msg){
var winWidth = $(window).width(),winHeight = $(window).height();
var modal = $("<div />").addClass("msg_modal")
.css("width",winWidth)
.css("height",winHeight)
.appendTo($("body"));
var msgDiv = $("<div />").addClass("msg_div")
.css("width","150px")
.css("height","60px")
.css("left",((winWidth-150)/2)+"px")
.css("top",((winHeight-60)/2)+"px")
.appendTo($("body"));
var titleDiv = $("<div />").addClass("msg_titleDiv").appendTo(msgDiv);
var title = $("<div />").addClass("msg_title").appendTo(titleDiv).html("提示信息");
var close = $("<div />").addClass("msg_close").appendTo(titleDiv).html("X");
var contentDiv = $("<div />").addClass("msg_content").appendTo(msgDiv).html(msg);
close.on("click",function(){
modal.remove();
msgDiv.remove();
});
$("body").on("keydown",function(evevt){
if(event.keyCode == "13"){
close.click();
}
});
}
如有疑问,请联系:
QQ:1004740957
Email:niujp08@qq.com