zoukankan      html  css  js  c++  java
  • 自定义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


  • 相关阅读:
    Linux 文件权限
    spak数据倾斜解决方案
    逻辑时钟
    kafka入门
    深入学习MySQL事务:ACID特性的实现原理
    程序员的诗
    java技术突破要点
    一个请求过来都经历了什么
    如何保持长时间高效学习
    你的系统如何支撑高并发
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539848.html
Copyright © 2011-2022 走看看