| home / experts / dhtml / column24 |   |
|
Since the dialogs are originally hidden, you should use a link or button to display them. For example:
<BUTTON onClick="popup1.style.visibility='visible';makeActive(popup1)">Show Element 1</BUTTON> <BUTTON onClick="popup2.style.visibility='visible';makeActive(popup2)">Show Element 2</BUTTON>
or
<A HREF="#" onClick="popup1.style.visibility='visible';makeActive(popup1);return false">Show Element 1</A> <A HREF="#" onClick="popup2.style.visibility='visible';makeActive(popup2);return false">Show Element 2</A>
You may also download the dialog page in ZIP format.
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
<BUTTON onClick="popup1.style.visibility='visible';makeActive(popup1)">Show Element 1</BUTTON>
<BUTTON onClick="popup2.style.visibility='visible';makeActive(popup2)">Show Element 2</BUTTON>
<DIV ID=popup1
STYLE="position:absolute;
visibility:hidden;
left:240;top:300;
width:212px;height:180;
border:2px threedhighlight outset;
background-color:threedface;
font-family:MS Sans Serif;font-size:8pt;
cursor:default"
onSelectStart="return false"
onMouseDown="makeActive(this)">
<DIV
STYLE="position:absolute;
left:0;top:0;
width:100%;height:100%;
border:1px inactiveborder solid">
</DIV>
<DIV
STYLE="position:absolute;
left:2;top:2;
width:204px;height:18px;
background-color:inactivecaption;
color:inactivecaptiontext;
font-family:MS Sans Serif;
font-size:9pt;font-weight:bold;
padding:2px"
onMouseDown="grabEl(this.offsetParent)">
<IMG SRC="x.gif"
WIDTH=12 HEIGHT=10 HSPACE=0 BORDER=0 ALIGN=RIGHT
STYLE="background-color:buttonface;
border:2px buttonhighlight outset;"
onMouseDown="xPress(this,1)"
onMouseUp="xPress(this,0)">
<IMG SRC="wr.gif"
WIDTH=20 HEIGHT=11 BORDER=0 VSPACE=1
ALIGN=ABSMIDDLE>
DHTML Popup Element 1
</DIV>
<DIV
STYLE="position:absolute;
left:2;top:21;
width:204px;height:18px;
background-color:menu;
color:menutext;
font-family:MS Sans Serif;font-size:8pt;"><SPAN ID="span1"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)"> Menu1 </SPAN><SPAN ID="span2"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)"> Menu2 </SPAN><SPAN ID="span3"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)"> Menu3 </SPAN></DIV>
<HR
STYLE="position:absolute;top:40;width:100%">
<DIV ID=menu1
STYLE="position:absolute;
visibility:hidden;
top:39;left:0;
width:100px;
border:2px threedhighlight outset;
background-color:menu;
font-family:MS Sans Serif;font-size:8pt;
color:menutext;
line-height:160%;
z-index:10;">
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 1</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 2</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 3</SPAN><BR>
</DIV>
<DIV ID=menu2
STYLE="position:absolute;
visibility:hidden;
top:39;left:0;
width:100px;
border:2px threedhighlight outset;
background-color:menu;
font-family:MS Sans Serif;font-size:8pt;
color:menutext;
line-height:160%;
z-index:10;">
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 1</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 2</SPAN><BR>
</DIV>
<DIV ID=menu3
STYLE="position:absolute;
visibility:hidden;
top:39;left:0;
width:100px;
border:2px threedhighlight outset;
background-color:menu;
font-family:MS Sans Serif;font-size:8pt;
color:menutext;
line-height:160%;
z-index:10;">
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 1</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 2</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 3</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
"this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
"this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 4</SPAN><BR>
</DIV>
<DIV
STYLE="position:absolute;
left:3;top:53;
color:windowtext">
Put any HTML/text for your users here
</DIV>
<CENTER><BUTTON
STYLE="position:relative;
top:145;width:70px"
onClick="popup1.style.visibility='hidden'">
OK</BUTTON></CENTER>
</DIV>
<DIV ID=popup2
STYLE="position:absolute;
visibility:hidden;
left:440;top:360;
width:212px;height:80;
border:2px threedhighlight outset;
background-color:threedface;
font-family:MS Sans Serif;font-size:8pt;
cursor:default"
onSelectStart="return false"
onMouseDown="makeActive(this)">
<DIV
STYLE="position:absolute;
left:0;top:0;
width:100%;height:100%;
border:1px inactiveborder solid">
</DIV>
<DIV
STYLE="position:absolute;
left:2;top:2;
width:204px;height:18px;
background-color:inactivecaption;
color:inactivecaptiontext;
font-family:MS Sans Serif;
font-size:9pt;font-weight:bold;
padding:2px"
onMouseDown="grabEl(this.offsetParent)">
<IMG SRC="x.gif"
WIDTH=12 HEIGHT=10 HSPACE=0 BORDER=0 ALIGN=RIGHT
STYLE="background-color:buttonface;
border:2px buttonhighlight outset;"
onMouseDown="xPress(this,1)"
onMouseUp="xPress(this,0)">
<IMG SRC="wr.gif"
WIDTH=20 HEIGHT=11 BORDER=0 VSPACE=1
ALIGN=ABSMIDDLE>
DHTML Popup Element 2
</DIV>
<DIV
STYLE="position:absolute;
left:3;top:23;
color:windowtext">
Put any HTML/text for your users here
</DIV>
<CENTER><BUTTON
STYLE="position:relative;
top:45;width:70px"
onClick="popup2.style.visibility='hidden'">
OK</BUTTON></CENTER>
</DIV>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
activeElement = null;
function makeActive(el){
if (activeElement) {
activeElement.children(0).style.borderColor = "inactiveborder";
activeElement.children(1).style.backgroundColor = "inactivecaption";
activeElement.children(1).style.color = "inactivecaptiontext";
}
el.style.zIndex = (activeElement) ? (activeElement.style.zIndex+1) : 1;
el.children(0).style.borderColor = "activeborder";
el.children(1).style.backgroundColor = "activecaption";
el.children(1).style.color = "captiontext";
activeElement = el;
}
makeActive(popup1);
activeMenu = null;
function setMenu(el){
makeActive(el.offsetParent.offsetParent);
if (activeMenu) {
activeMenu.menuElement.style.visibility = "hidden";
activeMenu.style.backgroundColor = "menu";
activeMenu.style.color = "menutext";
}
el.style.backgroundColor = "highlight";
el.style.color = "highlighttext";
switch (el.id) {
case "span1":
el.menuElement = menu1;
break;
case "span2":
el.menuElement = menu2;
break;
case "span3":
el.menuElement = menu3;
break;
}
el.menuElement.style.pixelLeft = el.offsetLeft+2;
el.menuElement.style.visibility = "visible"
activeMenu = el;
document.onmousedown = killMenu;
event.cancelBubble = true;
}
function killMenu(){
activeMenu.menuElement.style.visibility = "hidden";
activeMenu.style.backgroundColor = "menu";
activeMenu.style.color = "menutext";
activeMenu = null;
document.onmousedown = null;
}
function xPress(el,on) {
el.style.borderStyle = (on) ? "inset" : "outset";
event.cancelBubble = true;
}
currentX = currentY = null;
whichEl = null;
function grabEl(el) {
if (activeMenu) killMenu();
whichEl = el;
makeActive(whichEl);
event.cancelBubble = true;
whichEl.style.pixelLeft = whichEl.offsetLeft;
whichEl.style.pixelTop = whichEl.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
document.onmousemove = moveEl;
document.onmouseup = dropEl;
event.returnValue = false;
}
function moveEl() {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
whichEl.style.pixelLeft += distanceX;
whichEl.style.pixelTop += distanceY;
event.returnValue = false;
}
function dropEl() {
document.onmousemove = document.onmouseup = null;
}
//-->
</SCRIPT>
</BODY>
</HTML>
|
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: Feb 23, 1999
Revised: Feb 23, 1999
URL: http://www.webreference.com/dhtml/column24/colsIEexample10.html
