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">&times;</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);
});

时间： 2024-12-20 14:44:06

js中confirm揭示三个按钮“是”“否”“取消”的相关文章

[转]js中confirm实现执行操作前弹出确认框的方法

原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在删除或其它操作前弹出确定提示,我们有很多方法,最基本的就是利用js自带的函数confirm来操作了 最简单的用法如下: 鼠标事件使用confirm 复制代码 代码如下: <a href="#" onclick= "if(confirm( '是否确定! ')==false)r

【JS】Js中函数的三种调用方式

在同一个页面中,函数名必须是唯一的,并且区分大小写.Js中可以通过下面三种方式调用函数: 1. 函数的简单调用 2. 在事件的响应中调用函数 3. 通过连接调用函数 具体是怎么操作的呢,下面一一讲解: 函数的简单调用:函数的定义语句通畅被放在HTML文件的<head>内,而函数的调用语句通常被放在<body>中.如果函数定义之前调用函数,执行将会出错. 语法如下: <head> <script type="text/javascript">

js中addEventListener第三个参数涉及到的事件捕获与冒泡

js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型,比如点击(click).触摸(touchstart), 第二个参数就是事件函数, 比如我给一个button添加alert函数. window.onload=function(){ document.getElementById("hello").addEventListener("

JS中 confirm()方法的使用？

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框. 如果用户点击确定按钮,则 confirm() 返回 true.如果点击取消按钮,则 confirm() 返回 false. 在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入.在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句,相当于alert();方法 <input type="button" name=&qu

JS中confirm弹出框

1 if(confirm("确定要删除该任务吗?")){ 2 $.post("findTaskById.action",{taskId:taskId},function(data){ 3 if(data.status=='I' || data.status=='V'){ 4 window.location.href = "deleteTask.action?id=" + taskId; 5 } else { 6 alert("抱歉,该任

JS中 confirm() 方法

前言 环境: window 10,google 浏览器 测试代码 <html> <!-- 测试确定框,如果点 "是" ,则返回 true,这样就触发 a 标签的 href 属性 反之,则什么也不做,不会触发 a 标签的 href 属性. --> <head> <title>测试 </title> </head> <body> <a id="button" href="

JS中创建对象的三种方式

<script> 2 //创建对象的三种方式 3 // 1.利用对象字面量(传说中的大括号)创建对象 4 5 var obj1 = { 6 uname: 'ash', 7 age: 18, 8 sex: "女", 9 sayhi: function() { 10 console.log("hello kitty"); 11 12 } 13 } 14 15 //访问属性的两种方法 16 console.log(obj1.uname); 17 console

selenium python （十一）alert/confirm/prompt的处理（js中的弹出框）

webdriver中处理js所生成的alert.confirm以及prompt,采用switch_to_alert()方法定位到alert/confirm/prompt.然后使用text/accept/dismiss/send_keys进行操作 ①text:返回alert/confirm/prompt中的文字信息 ②accept:点击确认按钮 ③dismiss:点击取消按钮 ④send_keys:输入值,这个alert/confirm/prompt没有对话框就不能使用,否则会报错 eg:百度的设

JS中的弹窗问题confirm和prompt

JavaScript-确认(confirm 消息对话框) confirm 消息对话框通常用于允许用户做选择的动作,如:"你对吗?"等.弹出对话框(包括一个确定按钮和一个取消按钮). 语法: confirm(str); 参数说明: str:在消息对话框中要显示的文本 返回值: Boolean值 返回值: 当用户点击"确定"按钮时,返回true 当用户点击"取消"按钮时,返回false 注: 通过返回值可以判断用户点击了什么按钮 看下面的代码: &l