calan wrote:
I need a dialog box with Yes, No, and Cancel buttons that pops up when a
link is clicked.
I'm using asp on the server side, and basically, if the user clicks yes, I
want to go to a certain page and pass a certain variable value. For example:
href="my_page.a sp?answer=yes"
If they click no, I would call :
href="my_page.a sp?answer=no"
If they select cancel, I return false to cancel the default link action and
nothing happens.
What is the easiest and cleanest way to accomplish this?
As you cannot change the default dialogs and in time of popupblockers
and no real modal dialogs in gecko based browsers, I use my own <div>
based dialog with the elements I need. I therefore created a method
which will show up to three buttons with each caption passed to the
dialog. Something like:
function MsgBox(title,te xt,btn1,btn2,bt n3) {
this.title = title;
this.text = text;
this.btn1 = btn1;
this.btn2 = btn2;
this.btn3 = btn3;
if (!btn1)
btn1 = "OK";
// some more code to fill the dialog and show the div.
}
Your HTML might look like this (with some additional CSS)
<div id="msgBox">
<div id="msgBoxTitle "></div>
<div id="msgBoxText" ></div>
<div id="msgBoxBtnCo ntainer">
<div id="msgBoxBtn1 " onclick="MsgBox .notify(1)"></div>
<div id="msgBoxBtn2 " onclick="MsgBox .notify(2)"></div>
<div id="msgBoxBtn3 " onclick="MsgBox .notify(3)"></div>
</div>
</div>
When the user presses one of the buttons, another method gets called
(MsgBox.notify) which stores some properties like the button pressed,
it's caption etc. That method will call another predefined method that
was defined as recall function before calling the dialog:
MsgBox.notify = function(btnID) {
// code to hide the div dialog and set some props
this.returnValu e = btnID;
this.returnStri ng = this["btn" + btnID];
if (typeof this.returnMeth od == "function")
this.returnMeth od(this);
this.returnMeth od = null;
}
Call it like this:
function foo() {
MsgBox.returnMe thod = userAnswer;
MsgBox("Logout" ,"Do you want to save your
settings?","Yes ","No","Cancel" );
}
function userAnswer(msg) {
if (msg.returnStri ng == "Yes")
// do something on yes
else if (msg.returnStri ng == "No")
// do something on no
else
// cancel
}
HTH
Daniel
