ASP.NET - javascript confirm message box using 'Yes' 'No' text

Asked By Thileep on 12-Dec-11 09:49 PM

hai,
now i m using confirm("Message");
it shows 'ok' and 'cancel'.

I need the text 'yes'/'No'

how to get this??
Web Star replied to Thileep on 12-Dec-11 10:16 PM
you can't get directly text of button but you can get the clicked button and than you return corresponding text value as

function confirm_proceed()
       
{
           
if (confirm("Are you sure you want to proceed?")==true)
               
return "YES";
           
else
               
return "NO";
       
}
Anoop S replied to Thileep on 12-Dec-11 10:55 PM
The web is rapidly changing, and you would need to look beyond the normal Confirm dialogs. 

The Ajax Control toolkit of ASP.Net provides the Modal Popup Extender control that gives you exactly what you need. You can find the entire description and its properties http://www.asp.net/ajax/ajaxcontroltoolkit/samples/modalpopup/modalpopup.aspx.

In its simplest form, it would look like:
<ajaxToolkit:ModalPopupExtender runat="server" ID="myMPE" 
    PopupControlID="myPanelWithButtons"    OkControlID="OkayButtonID" 
    OnOkScript="ScriptToExecute"   CancelControlID="CancelButtonID" 
/>

And the Panel "myPanelWithButtons" would need to have a markup like:
<asp:Panel ID="myPanelWithButtons" runat="server" >
<br />What is your option?<br />
<asp:Button ID="OkayButtonID"    runat="server" Text="OK" />
<asp:Button ID="CancelButtonID" runat="server" Text="Cancel" />
</asp:Panel>

Additionally, you can use CSS and beautify this control to your heart's content. An interesting point that has to be mentioned is the ability that the Modal Popup extender to behave as a Modal dialog which is what we ideally need when receiving mandatory user input.
 
Jitendra Faye replied to Thileep on 12-Dec-11 11:03 PM
confirm is built in Function of javascript , you can't change button, for that you have to use popup .

you can use jquery popup.

If you want to show popup then use jquery popup.

after adding jqueryui plugin you can use it.

like this-

<script>

function funShow() {

$('#dialog).dialog({ resizable: false, height: 140, modal: true });

}
</script>

<div id="dialog" title="Basic dialog">hi
</div>


<asp:Button runat="server" Text="Button" onClientClick="return funShow()" />

FOR EXAMPLE FOLLOW THIS

-http://jqueryui.com/demos/dialog/


Riley K replied to Thileep on 12-Dec-11 11:50 PM


You can do it by the following code.

Write the following code in your HTML Page.


<script language="javascript" type="text/javascript">
  function window.confirm(str)
  {
    execScript('n = msgbox("'+str+'","4132")', "vbscript");
    return(n == 6);
  }
</script>


Call the function from the onClientClick event of your button


<asp:Button ID="btnOk" runat="server" OnClientClick="javascript:return confirm('Are you sure to proceed?');" OnClick="btnOk_Click" Text="OK" />
 
Write the btnOk_Click event in your server side code
protected void btnOk_Click(object sender, EventArgs e)
{
  // your code
}

Now your confirmation dialog will show Yes/No instead of Ok/Cancel. 


Regards
Suchit shah replied to Thileep on 12-Dec-11 11:56 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML >
<HEAD >
<title >Custom Alert Box</title >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<script >
document.onclick=disableEvents
document.oncontextmenu=disableEvents
var ef=0
function custAlert()
{
ef=1
var ids
ids=document.getElementById('alert')
ids.style.left=300;
ids.style.top=150;
ids.style.visibility="visible"
}

function disableEvents()
{
if(ef)
return false;
}
</script >
</HEAD >
<body bgColor="#ffffff" onLoad="custAlert();"style="overdflow:hidden" >
<form id="Form1" method="post" runat="server" >
<div align="center" id="alert" style="border:2px solid gray; background:#cdeb8b
url('images/img3.gif') repeat-x; LEFT:240; VISIBILITY:hidden; WIDTH:349; COLOR:red;
POSITION:absolute; TOP:104; HEIGHT:108" >
<br >
<h3 style="LEFT:0;WIDTH:152;POSITION:absolute;TOP:0;HEIGHT:40;align:Left" >
<font color="#356AA0" >Custom Alert Box</font ></h3 >
<IMG style="LEFT: 336px; WIDTH: 6px; POSITION: absolute; TOP: 8px; HEIGHT: 6px"
height="6" alt="Close" src="images/Cross.png" onClick="ef=0;document.getElementById('alert').style.visibility='hidden';" >
<br >
<HR width="99.03%" SIZE="1" style="LEFT: 0px; WIDTH: 99.03%; POSITION: absolute;
TOP: 32px; HEIGHT: 1px" >
<div id="msg" style="FONT-WEIGHT: bold; FONT-SIZE: smaller; TEXT-TRANSFORM: capitalize; WIDTH: 349; COLOR: #356aa0; FONT-FAMILY: 'Times New Roman', Verdana, Arial, sans-serif; HEIGHT: 85; TEXT-DECORATION: none" >
NJoy Programming<p >Success be Yours</div >
<p > </div >
</form >
</body >
</HTML >

Suchit shah replied to Thileep on 12-Dec-11 11:58 PM

The buttons in a confirmation box cannot be changed by Javascript.

I would suggest rolling your own in the form of an inline popup. Just create a div with position:absolute; in the centre of the page and then show/hide it.

The code below will outline what you need to do in vanilla Javascript. You will probably want to spend more time styling it, but the key points are:

position:absolute; So that the popup will appear in the centre of the page.display:none; So that the popup will be hidden when the page loads. The link has a href so that it will still be functional even without Javascript. The onClick attribute of the first link has return false; This stops the link from redirecting.

You can change the two onClicks inside the popup to do whatever else you want them to.

<style type="text/css"> 
div#popup 
{ 
    position:absolute; 
    display:none; 
    top:200px; 
    left:50%; 
    width:500px;  
    margin-left:-250px; 
    border:1px solid blue;  
    padding:20px; 
    background-color:white; 
} 
</style> 
<a  
    href="http://example.com/"  
    onClick="document.getElementById('popup').style.display = 'block'; return false;" 
>Go to example.com</a> 
<div id="popup"> 
    <p>Are you sure you want to go to example.com?</p> 
    <p> 
        <a onclick="document.location='http://example.com/'; return false;"> 
            Yes 
        </a> 
        <a onclick="document.getElementById('popup').style.display = 'none'; return false;"> 
            No 
        </a> 
    </p> 
</div> 

dipa ahuja replied to Thileep on 13-Dec-11 03:47 AM
You can't change its button or look

but you can take the modalpopupExtender for it:



<cc1:ScriptManager ID="ScriptManager1" runat="server"/>  
<cc1:ModalPopupExtender TargetControlID="Button2" BackgroundCssClass="modalBackground"
  CancelControlID="btnMsg" PopupControlID="panEdit" PopupDragHandleControlID="btnMsg"
  ID="ModalPopupExtender1" runat="server">
</cc1:ModalPopupExtender>
<cc1:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
  <ContentTemplate>
    <asp:Panel ID="panEdit" runat="server" CssClass="ModalWindow">
      <%--Button popup--%>
      <center>
        <asp:Label ID="Label1" runat="server" Text="Are you Sure you want to Exit?"/>
        <asp:TextBox Visible="false" ID="TextBox1" runat="server"></asp:TextBox><br />
        <asp:Button ID="btnMsg" runat="server" BorderWidth="0" Text="OK" /><br />
        <asp:Button ID="btn2" runat="server" BorderWidth="0" Text="Cancel" /><br />
        <br />
      </center>
    </asp:Panel>
  </ContentTemplate>
</cc1:UpdatePanel>

CSS

<style type="text/css">
  .modalBackground
  {
    background-color#CCCCFF;
    filteralpha(opacity=40);
    opacity0.5;
  }
  .ModalWindow
  {
    bordersolid1px#c0c0c0;
    background-color#99ccff;
    padding0px10px10px10px;
    positionabsolute;
    top-1000px;
  }
</style>