Question: How do I generate a Yes/No confirm dialog
as a DHTML popup?
Answer: Try a function such as
myConfirmDialogBox(q,yes,no,caption,modal):
|
Invoke a
non-MODAL dialog popup, or a
MODAL dialog popup
|
The preceding two links were created by using the following markup:
| |
<em>Invoke a</em> <a
onmouseover="return overlib('Invoke a non-MODAL dialog popup',
WRAP, BASE,2, TEXTPADDING,4, HAUTO, VAUTO);"
onmouseout="nd();"
onclick="myConfirmDialogBox(myQ,'myYes()','myNo()',myCap,false); return false;"
href="javascript:void(0);">non-MODAL dialog</a>
<em>popup, or a</em> <a
title="Invoke a MODAL dialog box"
onclick="myConfirmDialogBox(myQ,'myYes()','myNo()',myCap,true); return false;"
href="javascript:void(0);">MODAL dialog</a>
<em>popup</em>
|
|
with the following interface code:
| |
var myQ='Format the hard disk?', myCap='Answer this Question';
function myConfirmDialogBox(q,yes,no,caption,modal){
q=(q||'');
yes=(yes||'');
no=(no||'');
caption=(caption||'');
modal=(modal||false);
var myConfirmDialog=q
+(OLns4?'<form action="javascript:void(0);">':'')
+'<div style="font-size:4px;;line-height:4px;"> <br><\/div>'
+'<input type="submit" '
+'onclick="cClick();'+yes
+';return false;" value=" Yes "> '
+'<input type="submit" '
+'onclick="cClick();'+no
+';return false;" value=" No ">'
+(OLns4?'<\/form>':'');
/*
* Modify the styling appropriately for your site
*/
overlib(myConfirmDialog, EXCLUSIVEOVERRIDE,
caption?CAPTION:DONOTHING, caption?caption:DONOTHING, CLOSETEXT,'',
CAPTIONPADDING,4, TEXTPADDING,10, BGCLASS,'olbgD', BORDER,2,
CGCLASS,'olcgD', CAPTIONFONTCLASS,'olcapD', CLOSEFONTCLASS,'olcloD',
FGCLASS,'olfgD', TEXTFONTCLASS,'oltxtD',
SHADOW, SHADOWCOLOR,'#113377', modal?MODAL:DONOTHING,
WRAP, STICKY, EXCLUSIVE, SCROLL, MIDX,0, MIDY,0);
}
function myYes(){
/*
* Supplement the overlib call with whatever you want a Yes response to do
*/
overlib('You are very brave!', CAPTION,'"Yes" Response', CLOSECLICK,
CAPTIONPADDING,4, TEXTPADDING,10, BGCLASS,'olbgD', BORDER,2,
CGCLASS,'olcgD', CAPTIONFONTCLASS,'olcapD', CLOSEFONTCLASS,'olcloD',
FGCLASS,'olfgD', TEXTFONTCLASS,'oltxtD',
SHADOW, SHADOWCOLOR,'#113377',
WRAP, STICKY, EXCLUSIVE, SCROLL, MIDX,0, MIDY,0);
// Do something if OK
}
function myNo(){
/*
* Supplement the overlib call with whatever you want a No response to do
*/
overlib('A wise decision!', CAPTION,'"Yes" Response', CLOSECLICK,
CAPTIONPADDING,4, TEXTPADDING,10, BGCLASS,'olbgD', BORDER,2,
CGCLASS,'olcgD', CAPTIONFONTCLASS,'olcapD', CLOSEFONTCLASS,'olcloD',
FGCLASS,'olfgD', TEXTFONTCLASS,'oltxtD',
SHADOW, SHADOWCOLOR,'#113377',
WRAP, STICKY, EXCLUSIVE, SCROLL, MIDX,0, MIDY,0);
// Do something else (or nothing) if not OK
}
|
Note that the color and/or opacity of
the modal shield can be changed via the
MODALCOLOR and/or MODALOPACITY commands. Also,
document scrolling can be allowed
via the MODALSCROLL command.
Also see MODAL examples in frame and iframe documents, or with system controls.
|
Contrast the above with the native JavaScript confirm():
Confirm
Table of Contents
Question: How do I generate an OK/Cancel dialog box from JavaScript?
Answer: To generate an OK/Cancel box, use the confirm()
method (which is modal):
if (confirm('Your question')) {
// do things if OK
}
|
|
The button above was created using the following code:
<form name="myform" action="javascript:void(0);">
<div>
<input type="button" value="Try it now"
onclick=
"if(confirm('Format the hard disk?')) {
alert('You are very brave!');
} else {
alert('A wise decision!')
}">
</div>
</form>
|
|
|
|
