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):
|
Invoke a
MODAL dialog popup
|
The preceding link was created by using the following markup:
| |
<em>Invoke a</em> <a
onmouseover="return overlib('Invoke a MODAL dialog popup',
WRAP, BASE,2, TEXTPADDING,4, HAUTO, VAUTO);"
onmouseout="nd();"
onclick="myConfirmDialogBox(myQ,'myYes()','myNo()',myCap); 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){
q=(q||'');
yes=(yes||'');
no=(no||'');
caption=(caption||'');
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,
caption?CAPTION:DONOTHING, caption?caption:DONOTHING, CLOSETEXT,'',
CAPTIONPADDING,4, TEXTPADDING,10, BGCLASS,'olbgD',
CGCLASS,'olcgD', CAPTIONFONTCLASS,'olcapD', CLOSEFONTCLASS,'olcloD',
FGCLASS,'olfgD', TEXTFONTCLASS,'oltxtD',
SHADOW, SHADOWCOLOR,'#113377', SHADOWOPACITY,40,
WRAP, STICKY, MODAL, 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',
CGCLASS,'olcgD', CAPTIONFONTCLASS,'olcapD', CLOSEFONTCLASS,'olcloD',
FGCLASS,'olfgD', TEXTFONTCLASS,'oltxtD',
SHADOW, SHADOWCOLOR,'#113377', SHADOWOPACITY,40,
WRAP, STICKY, MODAL, MODALCLICK, 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',
CGCLASS,'olcgD', CAPTIONFONTCLASS,'olcapD', CLOSEFONTCLASS,'olcloD',
FGCLASS,'olfgD', TEXTFONTCLASS,'oltxtD',
SHADOW, SHADOWCOLOR,'#113377', SHADOWOPACITY,40,
WRAP, STICKY, MODAL, MODALCLICK, 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. Clicking on the
modal shield can be used to close the popup
if the MODALCLICK command is included in the overlib or overlib2 call.
Further note that MODAL popups with form content should include:
onfocus="OLmEdit=1;"
onblur="OLmEdit=0;"
in the start tags of any textareas and/or inputs of
type="text" to enable use of the paging and scrolling keys (including
Spacebar and Enter) by the browser's text editor.
Also see MODAL examples in frame and iframe documents, or with system controls.
Review the MODAL section of the Command Reference.
|
Contrast the MODAL dialog popup
(above) with the native JavaScript confirm function (below).
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>
|
|
|
|
