自定义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:[email protected]

时间: 2024-10-11 09:14:48

自定义alert提示框的相关文章

修改js confirm alert 提示框文字的简单实例

修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> *{padding: 0; margin: 0;} html{ height: 100%; } body{ font-size: 16px; font-family: "Microsoft Yah

基于Zepto的Alert提示框开源框架Tiny-Alert

项目主页:http://shootyou.github.io/Tiny-Alert/ 什么是Tiny-Alert? 这是一个基于Zepto的提示框插件,在移动端使用会有更好的效果.它被设计成是移动端原生alert和confirm提示框的更美观替代品.同时它还实现了一个loading效果.它的核心代码参考了rDailog,在它基础上适配了zepto,去掉了移动端用不到的特性,另外让它看上去更美观了. 它有如下特性: 轻量级,代码量不超过300行,压缩后仅2k. 基于zepto更适合移动端. 支持回

自定义浏览器alert ,抛弃掉死板的蓝框 自定义风格提示框。jquey ui bootstrap 实现自定义 alert confirm prompt ,by大崔

首先看一下自定义提示框的效果图 alert   普通的提示当然可以自定义样式 confrim 确认框 支持callback //message 提示的信息 ,callback(true/false)回调函数 window.shconfirm = function (message, callback) 回调函数参数为 true/false prompt  邀请用户输入框 //message 提示的信息 ,callback(msg)回调函数(用户输入的消息), param:regex 输入的 正则

自定义alert弹框,title不显示域名

问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (function() { window.alert = function(name) { $(".tip").css("display", "block") $(".tip .content").html(name) } })() 调用:alert(name) 在页面中添加弹框元素,自定义其样式,默认隐藏

修改js confirm alert 提示框文字

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <style> *{padding: 0; margin: 0;} html{ height: 100%; } body{ font-size: 16px; font-family: "Microsoft Yahei"; height: 100%; } h1,h2

easyUI实现(alert)提示框自动关闭的实例代码

function alert_autoClose(title,msg,icon){  var interval;  var time=1000;  var x=2;  //设置时间2s $.messager.alert(title,msg,icon,function(){});  interval=setInterval(fun,time);     function fun(){    --x;    if(x==0){      clearInterval(interval);  $(".m

自定义Lable提示框(渐变动画)

- (void)viewDidLoad { [super viewDidLoad]; // 移除按钮不能使用,开始默认 self.removeBtn.enabled = NO; self.alertView.textAlignment = UITextAlignmentCenter; self.alertView.alpha = 0.0; // 完全透明 self.alertView.backgroundColor = [UIColor colorWithRed:1 green:1 blue:0

替代alert的消息框和提示框

alert提示框由于外观不太友好,所以一般都不用alert了. 我在这里使用bootstrap的样式,写了一个可以单独显示消息,也可以确认取消的提示框. 使用的外观如下: 一:单独显示消息: 二:确认和取消: 单独显示消息的方法传递类型,信息,显示时间以及回掉函数.其中通过重载可以只传递信息. 确认和取消的方法传递类型,信息以及回掉函数.其中可以通过重载可以只传递信息和确认后执行的回掉函数.如果点击取消就去隐藏该提示框. 下面是代码: 1 //success 成功 2 //info 信息 3 /

iOS 自定义提示框

之前因为项目需要做了一个自定义的提示框,从底部弹出 gitoschina地址: https://git.oschina.net/deney/ios-ZLActionView.git