替代alert的消息框和提示框

  alert提示框由于外观不太友好,所以一般都不用alert了。

  我在这里使用bootstrap的样式,写了一个可以单独显示消息,也可以确认取消的提示框。

  使用的外观如下:

  一:单独显示消息:

  

  二:确认和取消:

  

  单独显示消息的方法传递类型,信息,显示时间以及回掉函数。其中通过重载可以只传递信息。

  确认和取消的方法传递类型,信息以及回掉函数。其中可以通过重载可以只传递信息和确认后执行的回掉函数。如果点击取消就去隐藏该提示框。

  下面是代码:

  

 1 //success   成功
 2 //info      信息
 3 //warning   警告
 4 //danger    错误!
 5 function alertBox(type, msg, showTime, callBack) {
 6     var divCss = "alert alert-" + type + " alert-dismissable";
 7     if (showTime == null) showTime = 3000;
 8     var divAlertBox;
 9     if ($("#divAlertBox").length != 0) {
10         $("#divAlertBox span").text(msg);
11         divAlertBox = $("#divAlertBox");
12         divAlertBox.removeClass().addClass(divCss).slideDown(1000);
13     } else {
14         divAlertBox = $("<div id=‘divAlertBox‘ style=‘display:none;position:fixed;z-index:9999;‘ class=‘" + divCss + "‘><button type=‘button‘ class=‘close‘ data-dismiss=‘alert‘ aria-hidden=‘true‘>&times;</button><span>" + msg + "</span></div>");
15         $("body").append(divAlertBox);
16         divAlertBox.slideDown(1000);
17         box(divAlertBox);
18     }
19     setTimeout(function () {
20         divAlertBox.fadeOut(1000);
21         if (callBack != null) {
22             callBack();
23         }
24     }, showTime);
25 }
26
27 function alertSuccess(msg, showTime, callBack) {
28     alertBox("success", msg, showTime, callBack);
29 }
30
31 function alertInfo(msg, showTime, callBack) {
32     alertBox("info", msg, showTime, callBack);
33 }
34
35 function alertWarning(msg, showTime, callBack) {
36     alertBox("warning", msg, showTime, callBack);
37 }
38
39 function alertDanger(msg, showTime, callBack) {
40     alertBox("danger", msg, showTime, callBack);
41 }
42
43 //必传入回掉函数
44 function confirmBox(type, msg, callBack) {
45     var divCss = "alert alert-" + type;
46     var divConfirmBox;
47     if ($("#divConfirmBox").length != 0) {
48         $("#divConfirmBox span").text(msg);
49         divConfirmBox = $("#divConfirmBox");
50         divConfirmBox.removeClass().addClass(divCss).slideDown(1000);
51         divConfirmBox.find("button:first")[0].onclick = callBack;
52     } else {
53         divConfirmBox = $("<div id=‘divConfirmBox‘ style=‘display:none;position:fixed;z-index:9999;‘ class=‘" + divCss + "‘><span>" + msg + "</span><br/></div>");
54         var btnYes = $("<button style=‘margin-top:20px;margin-right:50px;‘ type=‘button‘ class=‘btn btn-warning‘>确定</button>");
55         var btnNo = $("<button style=‘margin-top:20px;‘ type=‘button‘ class=‘btn btn-primary‘  onclick=‘confirmBoxHide()‘>取消</button>");
56         btnYes[0].onclick = callBack;
57         divConfirmBox.append(btnYes).append(btnNo);
58         $("body").append(divConfirmBox);
59         divConfirmBox.slideDown(1000);
60         box(divConfirmBox);
61     }
62 }
63
64 function confirmSuccess(msg, callBack) {
65     confirmBox("success", msg, callBack);
66 }
67
68 function confirmInfo(msg, callBack) {
69     confirmBox("info", msg, callBack);
70 }
71
72 function confirmWarning(msg, callBack) {
73     confirmBox("warning", msg, callBack);
74 }
75
76 function confirmDanger(msg, callBack) {
77     confirmBox("danger", msg, callBack);
78 }
79
80 function confirmBoxHide() {
81     $("#divConfirmBox").fadeOut(1000);
82 }
83
84 function box(jqObj) {
85     //获取DIV为‘box’的盒子
86     var oBox = jqObj[0];
87     //获取元素自身的宽度
88     var L1 = oBox.clientWidth;
89     //获取元素自身的高度
90     var H1 = oBox.clientHeight;
91     //获取实际页面的left值。(页面宽度减去元素自身宽度/2)
92     var Left = (document.documentElement.clientWidth - L1) / 2;
93     //获取实际页面的top值。(页面宽度减去元素自身高度/2)
94     var top = (document.documentElement.clientHeight - H1) / 4;
95     oBox.style.left = Left + ‘px‘;
96     oBox.style.top = top + ‘px‘;
97 }

  提示框的应该设置为模式对话框形式,目前还没有完善。

时间: 2024-10-27 12:40:15

替代alert的消息框和提示框的相关文章

js三种消息框总结-警告框、确认框、提示框

js消息框类别:警告框.确认框.提示框 警告框:alert("文本"); 确认框:confirm("文本"); 提示框:prompt("文本","默认值"); 一:confirm使用范例 <script type="text/javascript"> function test(){ var res = confirm("请选择"); if(res == true){ doc

JS组件Bootstrap实现弹出框和提示框效果代码

JS组件Bootstrap实现弹出框和提示框效果代码 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2015-12-08我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编 辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户

JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

原文:JS组件系列--Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信

Bootstrap:弹出框和提示框效果以及代码展示

(转自Bootstrap:弹出框和提示框效果以及代码展示) 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三

Bootstrap篇:弹出框和提示框效果以及代码展示

前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

JavaScript 中创建三种消息框:警告框、确认框、提示框。

网址:http://www.w3school.com.cn/js/js_popup.asp 警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: alert("文本") 确认框 确认框用于使用户可以验证或者接受某些信息. 当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作. 如果用户点击确认,那么返回值为 true.如果用户点击取消,那么返回值为 false. 语法: confirm("文本")

可以替代alert 的漂亮的Js弹框

1 基本弹框 2确认框 3又一种确认框 4带返回的弹框 5带返回的探矿 6 6 一切尽在 http://t4t5.github.io/sweetalert/

js创建弹框(提示框,待确认框)

html,body,div,h1,h2,h3,h4,h5,h6,p,table,form,label,ol,ul,li,dl,dt,dd,img,p{margin:0; padding:0;} html,body{text-size-adjust:none;-webkit-text-size-adjust:none;-webkit-user-select:none;} a{color:#333; text-decoration:none;} a,input:focus,div,select{ta

uwp - ContentDialog - 自定义仿iphone提示框,提示框美化

为了实现我想要的效果花费了我很长时间,唉,当初英语不好好学,翻官网翻了半天才找到,分享给刚入门的新手. 首先看一张图片示例,我们要模仿的dialog就是长这样的: 做出来的效果图: [代码] XAML: 1 <Grid Background="#3d4ba4"> 2 3 <ContentDialog x:Name="termsOfUseContentDialog" 4 Background="Transparent" Borde