弹出窗口(1)_弹出窗1-优快云博客

博客介绍了Popup对象的四种使用方式，通过JavaScript创建Popup对象，利用DHTML和CSS编写消息框，可动态改变其属性，如点击按钮改变颜色。还展示了在自定义消息框中添加内容，以及创建增强型DHTML工具提示和上下文菜单。

<HTML><HEAD><TITLE>Four Cool Ways to Use The Popup Object</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT>

</SCRIPT>
<META content="Microsoft FrontPage 5.0" name=GENERATOR></HEAD>
<BODY onload=richDialog()>
asdfasdfsadsdsadf

<DIV id=oDialog style="DISPLAY: none">
<DIV id=myid style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: white 1px solid; PADDING-LEFT: 18px; BACKGROUND: #cccccc; LEFT: 0px; PADDING-BOTTOM: 10px; FONT: 10pt tahoma; BORDER-LEFT: white 1px solid; WIDTH: 100%; PADDING-TOP: 10px; BORDER-BOTTOM: black 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
<B>Rich Message Boxes</B>
<HR style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" SIZE=1>
<DIV style="FONT-SIZE: 80%; WIDTH: 220px; LINE-HEIGHT: 1.5em; FONT-FAMILY: tahoma">
<BR>This message box is written entirely in Dynamic HTML (DHTML) using Cascading Style
Sheets (CSS). You can dynamically change properties of this message box. For
instance, click the button below to change the color of the popup object.
<BR><BR><BR><BUTTON style="BACKGROUND: #cccccc"
onclick="myid.style.backgroundColor='#FFCC00';" tabIndex=-1>Change
Color</BUTTON> </DIV>

<BR><BR>
<BUTTON style="BORDER-RIGHT: black 1px solid; BORDER-TOP: white 1px solid; BACKGROUND: #cccccc; BORDER-LEFT: white 1px solid; BORDER-BOTTOM: black 1px solid" onclick=parent.oPopup.hide(); tabIndex=-1>Close Message</BUTTON></DIV>

<DIV style="padding:10px; border-right:1px solid white; border-top:1px solid black; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); LEFT: 256; BORDER-LEFT: 1px solid black; WIDTH: 160; BORDER-BOTTOM: 1px solid white; POSITION: absolute; TOP: 78; HEIGHT: 192; font-style:normal; font-variant:normal; font-weight:normal; font-size:10pt; font-family:tahoma">
<B>DHTML Content</B>
<HR style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" SIZE=1>
It's easy to put content in a custom message box </DIV></DIV>
<DIV></DIV>
<DIV id=oToolTip style="DISPLAY: none">
<DIV style="BORDER-RIGHT: black 2px solid; PADDING-RIGHT: 10px; BORDER-TOP: black 2px solid; PADDING-LEFT: 10px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); LEFT: 0px; PADDING-BOTTOM: 10px; FONT: 10pt tahoma; BORDER-LEFT: black 2px solid; WIDTH: 100%; PADDING-TOP: 10px; BORDER-BOTTOM: black 2px solid; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
<B>Custom ToolTips</B>
<HR style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" SIZE=1>
Now you can create ToolTips that are enhanced by DHTML. </DIV></DIV>
<DIV id=oContext style="DISPLAY: none">
<DIV style="BORDER-RIGHT: black 2px solid; PADDING-RIGHT: 10px; BORDER-TOP: black 2px solid; PADDING-LEFT: 10px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); LEFT: 0px; PADDING-BOTTOM: 10px; FONT: 10pt tahoma; BORDER-LEFT: black 2px solid; WIDTH: 100%; PADDING-TOP: 10px; BORDER-BOTTOM: black 2px solid; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
<B>Custom ToolTips</B>
<HR style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" SIZE=1>
Now you can create ToolTips that are enhanced by DHTML. </DIV></DIV>
<DIV id=oContext2 style="DISPLAY: none">
</DIV>

</BODY></HTML>