自定义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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS+JS实现图片集展示(续)

    上一篇文章里,我们实现了图片集的展示,在本文,对上一篇文章的内容作了封装,实现效果上作了一些优化,具体的思路我就不再赘述,下面将我的代码贴出来,以供搭建参考。

    lzugis
  • mapboxGL中popup遮挡的优化

    在MapboxGL中,使用popup弹窗时,弹窗会出现超出范围的情况,本文就此问题做了点优化,共享记录下,一做自用,一做共享。

    lzugis
  • Arcgis for Js之GeometryService实现测量距离和面积

    距离和面积的测量时GIS常见的功能,在本节,讲述的是通过GeometryService实现测量面积和距离。先看看实现后的效果:

    lzugis
  • 大话 ThreadLocal

    该类提供了线程本地变量。该变量不同于普通的副本,因为访问这个变量(通过 get 或 set 方法)的每个线程都是自己独立初始化该变量的。 ThreadLoca...

    tomas家的小拨浪鼓
  • SSH连接时出现Host key verification failed的原因及解决方法

    [root@cache001 swftools-0.9.0]# ssh 192.168.1.90 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@...

    Python疯子
  • SSH连接时出现Host key verification failed的解决

    [root@db test]# ssh 11.16.1.10 IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING N...

    孙杰
  • 轻松搭建WordPress博客系统【图文】

    WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管...

    无道
  • 预测分析 · 员工满意度预测

    可以看出 上一次的评分、有没有工伤、过去5年有没有晋升 跟 满意度 呈正相关系数

    Michael阿明
  • R包vegan的典范相关分析(CCorA)

    典范相关分析(canonical correlation analysis,CCorA)是描述两组变量集之间整体相关性结构的方法,广泛用于多元数据的分析中。它是...

    用户7585161
  • FIREBIRD快速入门

    如之前已安装过其它版本的FIREBIRD,那么在安装之前,最好是完全卸载旧的版本,

    爻池科技

扫码关注云+社区

领取腾讯云代金券