自定义alert提示框
引言：在做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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年02月12日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读