js中confirm揭示三個按鈕「是」「否」「取消」

時間 2019-12-05

原文原文鏈接

js中confirm提示三個按鈕「是」「否」「取消」javascript

　　重載DOM中confirmcss

　　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);　
　 }html

　　// 調用java

　　function send(){node

　　var v = confirm("提示？\u000d 是（Y）：是\u000d 否（N）：否");
　 if (v=='6') {
　　 alert('是');　bootstrap

　　} else if(v=='7') {
　　alert('否');　架構

　　} else {
　　alert('取消');　ide

　　}
}函數

--------------this

-------------

咱們之因此彈出這個對話框，可能就是由於該操做很危險，因此要用戶確認。但若是默認選擇"肯定"，則可能違背了這個原則。
另外，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：

<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>

很少說了，都是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);

return {
alert: _alert,
confirm: _confirm
}

}();
});

調用方法：

// 四個選項都是可選參數
Modal.alert(
{
msg: '內容',
title: '標題',
btnok: '肯定',
btncl:'取消'
});

// 如需增長回調函數，後面直接加 .on( function(e){} );// 點擊「肯定」 e: true// 點擊「取消」 e: falseModal.confirm( { msg: "是否刪除角色？" }) .on( function (e) { alert("返回結果：" + e); });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。