js中confirm揭示三个按钮“是”“否”“取消”
js中confirm提示三个按钮“是”“否”“取消”
重载DOM中confirm
window.confirm = function(str) {
str=str.replace(/\'/g, "'&chr(39)&'").replace(/\r\n|\n|\r/g, "'&VBCrLf&'");
execScript("n = msgbox('"+ str +"', 3, '提示')", "vbscript");
return(n);
}
// 调用
function send(){
var v = confirm("提示?\u000d 是(Y):是\u000d 否(N):否");
if (v=='6') {
alert('是');
} else if(v=='7') {
alert('否');
} else {
alert('取消');
}
}
--------------
<script language=vbscript>
function go()
go=msgbox ("haha",3)
end function
</script>
<script language=javascript>
var a=go()
if(a==6)
{
alert("您按的是‘是’")
}
if(a==7)
{
alert("您按的是‘否’")
}
if(a==2)
{
alert("您按的是‘取消’")
}
</script>
-------------
我们之所以弹出这个对话框,可能就是因为该操作很危险,所以要用户确认。但如果默认选择"确定",则可能违背了这个原则。
另外,confirm对话框的按钮都是固定在"确定"和"取消"这两个。可能有些时候也不是很直观。
所以,可以考虑用vbscript中的msgbox来改写这个行为。下面是一个范例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script>
function deleteConfirm(msg)
{
function window.confirm(str)
{
str= str.replace(/\'/g, "'& chr(39) &'").replace(/\r\n/g, "'& VBCrLf &'");
execScript("n = msgbox('"+ str +"', 289, '删除框')", "vbscript");
return(n == 1);
}
return window.confirm(msg);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="deleteButton" runat="server" OnClientClick="javascript:return deleteConfirm('你确定要删除吗?')" Text="删除"
onclick="deleteButton_Click" />
</div>
</form>
</body>
</html>
关于msgbox 方法的具体细节,还可以参考下面的介绍
MsgBox 函数
在对话框中显示消息,等待用户单击按钮,并返回一个值指示用户单击的按钮。
MsgBox(prompt[, buttons][, title][,
helpfile, context])
参数
prompt
作为消息显示在对话框中的字符串表达式。prompt 的最大长度大约是
1024 个字符,这取决于所使用的字符的宽度。如果 prompt 中包含多个行,则可在各行之间用回车符 (Chr(13))、换行符 (Chr(10))
或回车换行符的组合 (Chr(13) & Chr(10)) 分隔各行。
Buttons
数值表达式,是表示指定显示按钮的数目和类型、使用的图标样式,默认按钮的标识以及消息框样式的数值的总和。有关数值,请参阅“设置”部分。如果省略,则buttons
的默认值为 0。
Title
显示在对话框标题栏中的字符串表达式。如果省略 title,则将应用程序的名称显示在标题栏中。
Helpfile
字符串表达式,用于标识为对话框提供上下文相关帮助的帮助文件。如果已提供helpfile,则必须提供 context。在 16
位系统平台上不可用。
Context
数值表达式,用于标识由帮助文件的作者指定给某个帮助主题的上下文编号。如果已提供 context,则必须提供
helpfile。在 16 位系统平台上不可用。
设置
buttons 参数可以有以下值:
常数 | 值 | 描述 |
---|---|---|
vbOKOnly | 0 | 只显示确定按钮。 |
vbOKCancel | 1 | 显示确定和取消按钮。 |
vbAbortRetryIgnore | 2 | 显示放弃、重试和忽略按钮。 |
vbYesNoCancel | 3 | 显示是、否和取消按钮。 |
vbYesNo | 4 | 显示是和否按钮。 |
vbRetryCancel | 5 | 显示重试和取消按钮。 |
vbCritical | 16 | 显示临界信息图标。 |
vbQuestion | 32 | 显示警告查询图标。 |
vbExclamation | 48 | 显示警告消息图标。 |
vbInformation | 64 | 显示信息消息图标。 |
vbDefaultButton1 | 0 | 第一个按钮为默认按钮。 |
vbDefaultButton2 | 256 | 第二个按钮为默认按钮。 |
vbDefaultButton3 | 512 | 第三个按钮为默认按钮。 |
vbDefaultButton4 | 768 | 第四个按钮为默认按钮。 |
vbApplicationModal | 0 | 应用程序模式:用户必须响应消息框才能继续在当前应用程序中工作。 |
vbSystemModal | 4096 | 系统模式:在用户响应消息框前,所有应用程序都被挂起。 |
第一组值 (0 - 5)
用于描述对话框中显示的按钮类型与数目;第二组值 (16, 32, 48, 64) 用于描述图标的样式;第三组值 (0, 256, 512)
用于确定默认按钮;而第四组值 (0, 4096) 则决定消息框的样式。在将这些数字相加以生成 buttons 参数值时,只能从每组值中取用一个数字。
返回值
MsgBox 函数有以下返回值:
常数 | 值 | 按钮 |
---|---|---|
vbOK | 1 | 确定 |
vbCancel | 2 | 取消 |
vbAbort | 3 | 放弃 |
vbRetry | 4 | 重试 |
vbIgnore | 5 | 忽略 |
vbYes | 6 | 是 |
vbNo | 7 | 否 |
说明
如果同时提供了
helpfile 和 context,则用户可以按 F1 键以查看与上下文相对应的帮助主题。
如果对话框显示取消按钮,则按 ESC
键与单击取消的效果相同。如果对话框包含帮助按钮,则有为对话框提供的上下文相关帮助。但是在单击其他按钮之前,不会返回任何值。
当MicroSoft
Internet Explorer使用MsgBox函数时,任何对话框的标题总是包含"VBScript",以便于将其与标准对话框区别开来。
下面的例子演示了 MsgBox 函数的用法:
Dim MyVar
MyVar = MsgBox ("Hello World!", 65, "MsgBox Example")
' MyVar contains either 1 or 2, depending on which button is clicked
-------------------------
相信很多人都受够了 alert、confirm 的样子,最近正在用 bootstrap 做项目,顺便封装了一个 bootstrap 样式的消息框。
实现起来很简单,bootstrap 本身就自带了 modal 模态框,样子还不错 :)就把它封装一下用吧。
无码无真相,少说多做,上代码。
项目是Asp.net Mvc架构的,方便全局调用,我直接在全局 Layout 页面加上以下HTML:
<!-- system modal start -->
<div id="ycf-alert" class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> [Title]</h5>
</div>
<div class="modal-body small">
<p>[Message]</p>
</div>
<div class="modal-footer" >
<button type="button" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>
<button type="button" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>
</div>
</div>
</div>
</div>
<!-- system modal end -->
不多说了,都是bootstrap modal的样式,不熟悉的朋友可以查查 bootstrap css ,中括号[....]的内容会最终替换为我们传入的参数显示。
js 封装如下:
;
$(function () {
window.Modal = function () {
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var alr = $("#ycf-alert");
var ahtml = alr.html();
//关闭时恢复 modal html 原样,供下次调用时 replace 用
//var _init = function () {
// alr.on("hidden.bs.modal", function (e) {
// $(this).html(ahtml);
// });
//}();
/* html 复原不在 _init() 里面做了,重复调用时会有问题,直接在 _alert/_confirm 里面做 */
var _alert = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
alr.find('.cancel').hide();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
}
}
};
};
var _confirm = function (options) {
alr.html(ahtml); // 复原
alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
alr.find('.cancel').show();
_dialog(options);
return {
on: function (callback) {
if (callback && callback instanceof Function) {
alr.find('.ok').click(function () { callback(true) });
alr.find('.cancel').click(function () { callback(false) });
}
}
};
};
var _dialog = function (options) {
var ops = {
msg: "提示内容",
title: "操作提示",
btnok: "确定",
btncl: "取消"
};
$.extend(ops, options);
console.log(alr);
var html = alr.html().replace(reg, function (node, key) {
return {
Title: ops.title,
Message: ops.msg,
BtnOk: ops.btnok,
BtnCancel: ops.btncl
}[key];
});
alr.html(html);
alr.modal({
width: 500,
backdrop: 'static'
});
}
return {
alert: _alert,
confirm: _confirm
}
}();
});
调用方法:
// 四个选项都是可选参数
Modal.alert(
{
msg: '内容',
title: '标题',
btnok: '确定',
btncl:'取消'
});
// 如需增加回调函数,后面直接加 .on( function(e){} );
// 点击“确定” e: true
// 点击“取消” e: false
Modal.confirm(
{
msg: "是否删除角色?"
})
.on( function (e) {
alert("返回结果:" + e);
});
js中confirm揭示三个按钮“是”“否”“取消”的更多相关文章
- [转]js中confirm实现执行操作前弹出确认框的方法
原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...
- js中addEventListener第三个参数涉及到的事件捕获与冒泡
js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...
- JS中 confirm()方法的使用?
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框. 如果用户点击确定按钮,则 confirm() 返回 true.如果点击取消按钮,则 confirm() 返回 false ...
- 关于原生js中函数的三种角色和jQuery源码解析
原生js中的函数有三种角色: 分两大种: 1.函数(最主要的角色)2.普通对象(辅助角色):函数也可以像对象一样设置属于本身的私有属性和方法,这些东西和实例或者私有变量没有关系两种角色直接没有必然的关 ...
- JS中 confirm() 方法
前言 环境: window 10,google 浏览器 测试代码 <html> <!-- 测试确定框,如果点 "是" ,则返回 true,这样就触发 a 标签的 ...
- JS 中 原生方法 (三) --- Date 日期
本文也说主要阐释了 Javascript 中的基础类型和 引用类型的自带方法,那么熟悉的同学又可以绕道了 总是绕道,真是羞耻悳boy 当然 本文阐述的主要类容 from MDN ( zh-cn ) D ...
- ----关于JS中迭代的三个“FOR”----
for each...in 使用一个变量迭代一个对象的所有属性值,对于每一个属性值,有一个指定的语句块被执行. 一些对象的内置属性是无法被遍历到的,包括所有的内置方法,例如String对象的index ...
- JS中confirm弹出框
if(confirm("确定要删除该任务吗?")){ $.post("findTaskById.action",{taskId:taskId},function ...
- JS中confirm,prompt用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- docker教程目录
为什么要用 Docker 什么是 Docker Docker 镜像 Docker容器的运用 Docker仓库 Docker如何获取镜像 CentOS 安装Docker Docker 列出镜像 Dock ...
- go-statsd项目
linux命令: 进程:top 收包丢包:netstat -su[c持续输出] go tool pprof: 我们可以使用go tool pprof命令来交互式的访问概要文件的内容.命令将会分析指定的 ...
- Konva的使用
KonvaJS 快速入门 Konva 是一个 基于 Canvas 开发的 2d js 框架库, 它可以轻松的实现桌面应用和移动应用中的图形交互交互效果. Konva 可以高效的实现动画, 变换, 节点 ...
- bzoj3673可持久化并查集
n个集合 m个操作操作:1 a b 合并a,b所在集合2 k 回到第k次操作之后的状态(查询算作操作)3 a b 询问a,b是否属于同一集合,是则输出1否则输出0 0<n,m<=2*10^ ...
- 重新学习MySQL数据库6:浅谈MySQL的中事务与锁
『浅入深出』MySQL 中事务的实现 在关系型数据库中,事务的重要性不言而喻,只要对数据库稍有了解的人都知道事务具有 ACID 四个基本属性,而我们不知道的可能就是数据库是如何实现这四个属性的:在这篇 ...
- nyoj151——中国剩余定理
生理周期 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 142220 Accepted: 45744 Descripti ...
- JS返回一个数据的千分位格式
/** * 价钱转换-从右往左每3位数字加一个逗号 * @param price 需要转换的价格 */ formatPrice(price){ var newPrice = price.split(' ...
- ZOJ 2599 Graduated Lexicographical Ordering ★(数位DP)
题意 定义两个数的比较方法,各位数字之和大的数大,如果数字和相等则按字典序比较两个数的大小.输入n,k,求:1.数字k的排名:2.排名为k的数. 思路 算是一类经典的统计问题的拓展吧~ 先来看第一问. ...
- HDU 3779 Railroad(记忆化搜索)
Railroad Time Limit : 4000/2000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) Total Subm ...
- Spring的AOP介绍
AOP:(Aspect-Orlented-Programming)面向切面编程,和面向对象是互相补充的.面向对象是横着编程,面向切面则是竖着编程. 1 2 3 4 @Before("exec ...