Might be easier to understand... We split client side and server side event. Upon confirm, we trigger server-side click event... Just in case you don't like
__doPostBack('btnDelete', 'OnClick')
Server side is omitted...
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html>
<style>
.hidden{
display:none;
}
</style>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootbox.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnTest" runat="server" Text="Confirm 1" OnClientClick="return confirmClick(this);" />
<asp:Button ID="btnReal" runat="server" Text="Actual 1" CssClass="real-button hidden" OnClick="btnTest_Click" />
</div>
<div>
<asp:Button ID="btnTest2" runat="server" Text="Confirm 2" OnClientClick="return confirmClick(this);" />
<asp:Button ID="btnReal2" runat="server" Text="Actual 2" CssClass="real-button hidden" OnClick="btnTest_Click" />
</div>
<div>
<asp:Button ID="btnTest3" runat="server" Text="Confirm 3" OnClientClick="return confirmClick(this);" />
<asp:Button ID="btnReal3" runat="server" Text="Actual 3" CssClass="real-button hidden" OnClick="btnTest_Click" />
</div>
</form>
</body>
</html>
<script>
function confirmClick(e) {
var result = bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
buttons: {
confirm: {
label: 'Yes',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: function (result) {
var real = $(e).parent().find('.real-button');
if (result && real)
{
console.log('This was logged in the callback: ' + result + real.val());
real.click();
}
}
});
return true;
}
</script>