引言:在做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:[email protected]
时间: 2024-10-11 09:14:48