99 lines
6.8 KiB
HTML
99 lines
6.8 KiB
HTML
<!--TOOLBAR_START--><!--TOOLBAR_EXEMPT--><!--TOOLBAR_END-->
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>Creating Dynamic Pop-up Elements with IE 5.5</TITLE>
|
|
</HEAD>
|
|
<LINK ID="oCSS" REL=STYLESHEET HREF="popup.css" TYPE="text/css">
|
|
|
|
<SCRIPT LANGUAGE="JScript">
|
|
var oPopup = window.createPopup()
|
|
|
|
function goPop(oHeight)
|
|
{
|
|
var oPopupBody = oPopup.document.body;
|
|
var lefter = event.offsetY+10;
|
|
var topper = event.offsetX+10;
|
|
|
|
oPopupBody.innerHTML = styleDiv.innerHTML;
|
|
oPopup.show(topper, lefter, 200, oHeight, document.body);
|
|
document.body.onmouseup = closePopup;
|
|
}
|
|
|
|
function goContext(oHeight)
|
|
{
|
|
var oPopupBody = oPopup.document.body;
|
|
var lefter = event.offsetY+10;
|
|
var topper = event.offsetX+10;
|
|
|
|
oPopupBody.innerHTML = oContext.innerHTML;
|
|
oPopup.show(topper, lefter, 207, oHeight, document.body);
|
|
document.body.onmouseup = closePopup;
|
|
}
|
|
|
|
function closePopup()
|
|
{
|
|
oPopup.hide();
|
|
}
|
|
|
|
function fillPopup(titler, texter, linker)
|
|
{
|
|
oTitle.innerText=titler;
|
|
oText.innerText=texter;
|
|
oLinkStore.innerText=linker;
|
|
}
|
|
</SCRIPT>
|
|
|
|
</HEAD>
|
|
|
|
<BODY STYLE="font-family:verdana; font-size:70%" oncontextmenu="goContext('87'); return false" >
|
|
<DIV CLASS="bar title">Creating Dynamic Pop-up Elements</DIV>
|
|
|
|
<DIV STYLE="width:600">
|
|
<DIV CLASS="desbar">
|
|
|
|
<P>The new pop-up feature in Microsoft® Internet Explorer 5.5 provides an easy way to create context menus, dialog boxes, pop-up tips, and glossary entries. These all can be built with DHTML.</P>
|
|
<P>Right-click anywhere within the main document to display a customized context menu that uses a pop-up window. Choosing an option in the context menu sends you to the related page in the IFRAME below.</P>
|
|
<IFRAME SRC="iframe4popup.htm" ID="oIframe" STYLE="position:relative; top:10; left:10; width:95%; height:150;"></IFRAME>
|
|
<BR><BR><BR>Click on the bold elements in the paragraph below to see glossary entries created using a pop-up window.<BR> <BR>
|
|
<DIV STYLE="padding:10px; border:1px solid #cccccc">
|
|
Creating Dynamic Pop-up Elements with <SPAN TITLE="Click here to view definition" onclick=" fillPopup('Internet Explorer','Application developed to browse the World Wide Web','http://www.microsoft.com/windows/ie'); goPop('100');" STYLE="cursor:hand"><B>IE 5.5</B></SPAN> is easy now that the developers at <SPAN TITLE="Click here to view definition" onclick=" fillPopup('Microsoft Corp.','A great place to work','http://www.microsoft.com'); goPop('100');" STYLE="cursor:hand"><B>Microsoft</B></SPAN> have implemented it into the latest version of their Web browser. To learn how to use <SPAN TITLE="Click here to view definition" onclick=" fillPopup('pop-up','A type of overlapped window typically used for dialog boxes, message boxes, and other temporary windows.','http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/popup.asp'); goPop('118');" STYLE="cursor:hand"><B>pop-up</B></SPAN> and other <SPAN TITLE="Click here to view definition" onclick=" fillPopup('DHTML','Dynamic Hyper-Text Markup Language','http://msdn.microsoft.com/workshop'); goPop('100');" STYLE="cursor:hand"><B>DHTML</B></SPAN> features, see the <SPAN TITLE="Click here to view definition" onclick=" fillPopup('MSDN','Microsoft Developers Network','http://msdn.microsoft.com'); goPop('100');" STYLE="cursor:hand"><B>MSDN Web Workshop</B></SPAN>.<BR><BR>
|
|
</DIV>
|
|
<BR>
|
|
|
|
<!-- This is the formatting that the pop-up will use -->
|
|
<DIV ID="styleDiv" STYLE="display:none">
|
|
<DIV STYLE="position:absolute; top:0; left:0; background:#ffffff; border:1px solid #6699cc; width:200; height:100px; font-family:verdana; font-size:9pt; border:1px solid black; z-index:3 ;">
|
|
|
|
<DIV ID="oTitle" STYLE="position:relative; width:100%; background:#ffffff; height:20px; font-weight:bold; padding:5px; font-size:10pt; ; filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#00ffffff', startColorstr='#FF99CCFF', gradientType='1'); ">Title of tip</DIV>
|
|
|
|
<DIV ID="oText" STYLE="padding:5px"></DIV>
|
|
<DIV ID="oLink" STYLE="cursor:hand; font-weight:bold; color:#6699CC; padding:5px" onclick="parent.oIframe.location.href =oLinkStore.innerText">Go there...</DIV>
|
|
<DIV ID="oLinkStore" STYLE="display:none" ></DIV>
|
|
</DIV>
|
|
</DIV>
|
|
|
|
<DIV ID="oContext" STYLE="display:none">
|
|
<DIV STYLE="position:relative; top:0; left:0; border:2px solid black; border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;">
|
|
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='iframe4popup.htm';">
|
|
<IMG SRC="../Graphics Files/home.gif" ALIGN="absmiddle"> Home</DIV>
|
|
|
|
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://search.microsoft.com';">
|
|
<IMG SRC="../Graphics Files/search.gif" ALIGN="absmiddle"> Search</DIV>
|
|
|
|
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/windows/ie';">
|
|
<IMG SRC="../Graphics Files/ielogo.gif" ALIGN="absmiddle"> Intenet Explorer</DIV>
|
|
|
|
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/info/cpyright.htm';">
|
|
© Microsoft Corporation</DIV>
|
|
</DIV>
|
|
</DIV>
|
|
</DIV>
|
|
</DIV>
|
|
<DIV CLASS="bar" STYLE="position:absolute; top:467px; padding:5px; padding-left:10">
|
|
<A HREF="http://www.microsoft.com/misc/cpyright.htm" TARGET=_TOP>
|
|
©Microsoft Corporation. All rights reserved. Terms of use</A>.
|
|
</DIV>
|
|
<P><FONT COLOR="black" FACE="ms sans serif" SIZE="2">For new and updated Web samples, visit the <A HREF="http://msdn.microsoft.com/downloads/c-frame.htm#/downloads/samples/internet/default.asp" TARGET="_blank">MSDN Online Web & Internet Samples</A> site.</FONT>
|
|
</BODY>
|
|
</HTML>
|