自定义alert提示框

标签：alert   js   css   前端   jquery   

引言：在做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

自定义alert提示框

标签：alert   js   css   前端   jquery   

原文地址：http://blog.csdn.net/gisshixisheng/article/details/43759511