2.3 无边框窗口
所谓无边框窗口是指不包括IE浏览器窗口所固有的标题栏及灰色的窗口边框的窗口，无边框窗口在某特定的网站中起着举足轻重的作用。下面将通过两个具体实例介绍如何实现无边框窗口。
实例040 半透明背景的无边框窗口
本实例是一个美化界面的程序
实例位置：光盘\mingrisoft\02\040
实例说明
对于一个页面风格清新自然的网站来说，如果弹出的窗口带有不适合页面风格的灰色边框及死板的标题栏，那么势必会影响网站的整体效果。根据网站的风格，将弹出的窗口设置为半透明背景的无边框窗口，可以让整个网站看起来更加和谐。本实例将向读者介绍应用CSS+DIV实现半透明背景的无边框窗口。运行本实例，单击“用户登录”超级链接即可弹出半透明背景的无边框用户登录窗口，如图2.14所示。
图2.14 半透明背景的无边框窗口
技术要点
本实例主要通过在页面中加入<div>标记，并在页面中控制层的位置及其显示和隐藏来实现。在页面中加入层的语法如下：
<div id="value" align="value" class="value" style="value">
……
</div>
参数说明：
● id：<div>标记中的id也可以说是它的名字，常和CSS样式结合，实现对网页中任何元素的控制。
● align：用于控制<div>标记中的元素的对齐方式，其value值可以是left、center和right，分别用于设置元素的居左、居中和居右对齐。
● class：用于设置<div>标记中的元素的样式。其value值为CSS样式中的class选择符。
● style：用于设置<div>标记中的元素的样式。其value值为CSS属性值，各属性值间应使用分号分隔。该属性最常用的功能之一就是进行<div>标记的定位，其对应的属性为position，该属性有两个可选值：relative和absolute，relative表示<div>标记的位置是相对于它所在的窗口的，absolute表示<div>标记的位置是绝对的，可以通过表2.5所示的属性进行设置。
表2.5 属性说明
style属性的另一个常用功能是控制<div>标记的display属性，用于设置元素的浮动特征，将display设置为block（块），容器中的所有元素都将会被当作一个单独的块放入到页面中；将display设置为inline，将使其行为和元素inline一样，即使是普通的块元素它也会被组合成像<span>那样的输出流输出到页面上；将display设置为none，<div>元素就像从页面中被移走一样，它下面的所有元素都会被自动跟上填充。
说明：如果在网页中，单独使用<div>而不加任何CSS-P（Cascading Style Sheets Positioning，是CSS的一个扩展，它可以控制任何对象在网上的位置）。它在网页中的效果和使用<p>标记是一样的。
实现过程
（1）在要弹出无边框窗口的页面的最底部加入一个<div>标记，其name属性的值为User，并通过其style属性控制层的大小、层的隐藏，以及为该层设置半透明背景。该层中的内容为无边框窗口要显示的内容。User层的完成代码如下：
<!--应用层设计用户登录表单页面开始-->
<div id="User" style="position:absolute;width:240px; height:139px;display:none;filter:alpha(opacity=85)">
<table width="240"height="139" border="0"align="center"cellpadding="0"
cellspacing="0">
<tr>
<td height="139" align="center">
<form name="form_U" method="post" action="#">
<table width="220" height="115" bgcolor="#FFFFFF" border="0" align="center"
cellpadding="0" cellspacing="0" class="tableBorder">
<tr align="center" valign="middle">
<td height="24" colspan="2" background="Images/bg_Login.GIF">
<font color="#505875">=== 用户登录 ===</font></td>
</tr>
<tr>
<td width="61" height="27" align="right" valign="middle">用户名：</td>
<td width="157" valign="middle">
<input name="UID" type="text" maxlength="20"></td>
</tr>
<tr>
<td height="27"align="right"valign="middle">密 码：</td>
<td valign="middle">
<input name="PWD"type="password" maxlength="20"
onKeyDown="if(event.keyCode==13) mycheck(form_U,'用户名')"></td>
</tr>
<tr align="center" valign="middle">
<td height="27" colspan="2">
<input name="Submit" type="button" class="btn_grey" value="登录" onClick="mycheck(form_U,'用户名')">
<input name="Submit2" type="button" class="btn_grey" value="关闭"
onClick="javascript:User.style.display='none';"></td>
</tr>
</table>
</form></td>
</tr>
</table>
</div>
<!--应用层设计用户登录表单页面结束-->
注意：不要忘记在层中加入使控制层隐藏的按钮（即关闭按钮），该按钮执行的操作是将User层的display样式设置为none。
（2）在页面中加入“用户登录”超链接，该超链接执行的操作是调用自定义JavaScript函数Myopen()显示User层，关键代码如下：
<a href="#" onClick="Myopen(User)">用户登录</a>
（3）编写自定义的JavaScript函数Myopen()，用于控制层的居中显示，代码如下：
<script language="javascript">
function Myopen(divID){ //根据传递的参数确定显示的层
divID.style.display='block';
divID.style.left=(document.body.clientWidth-240)/2;
divID.style.top=(document.body.clientHeight-139)/2;
}
</script>
举一反三
根据本实例，读者可以：
制作在线影院中的会员登录页面；
制作在线论坛中的版主登录页面。
实例041 弹出无边框窗口背景变灰
本实例是一个美化界面的程序
实例位置：光盘\mingrisoft\02\041
实例说明
在网页中，弹出无边框的子窗口，并且将父窗口变灰，不仅可以美化、规范页面，而且可以防止同时打开多个子窗口，造成资源的浪费。本实例将介绍弹出无边框窗口背景变灰的方法。运行本实例，将显示论坛的精华帖子页面，在该页面中，单击“登录”超链接时，将居中显示无边框的登录窗口，并且父窗口变为灰色不可用状态，如图2.15所示。单击“关闭”按钮后，登录窗口不显示，并且父窗口变为可用状态。
图2.15 弹出无边框窗口背景变灰
技术要点
在实现本实例时，需要在页面中添加两个<div>标记（一个用于显示登录窗口，另一个用于设置父窗口变灰），并且将这两个<div>标记的style属性的子属性display设置为none，即不显示；然后通过CSS样式控制用于设置父窗口变灰的<div>标记并黑色半透明效果，再在第一个<div>标记中添加实现用户登录的表单及表单元素，并且添加“关闭”按钮，用于设置该标记和用于设置父窗口变灰的<div>标记不显示；最后在页面中页面中添加控制弹出窗口的超链接，及相应的JavaScript代码。
关于通过CSS的滤镜控制<div>标记的背景为半透明效果的具体方法请参见实例049。
实现过程
（1）在要弹出无边框窗口的页面的<body>标记下方添加一个<div>标记，其id属性值为notClickDiv，关键代码如下：
<div id="notClickDiv"></div>
（2）在要弹出无边框窗口的页面的最底部加入一个<div>标记，其id属性的值为login，并通过其style属性控制层的大小、层的背景和层的隐藏。该层中的内容为无边框窗口要显示的内容。login层的完成代码如下：
<div id="login" style="position:absolute;width:260px; height:156px;display:block; z-index:10; background-image:url(images/login.jpg)">
<form name="form1" method="post" action="">
<table width="260" height="156" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="51"> </td>
</tr>
<tr>
<td align="center">用户名：
<input type="text" name="username"><br></td>
</tr>
<tr>
<td align="center">密 码：<input type="password" name="pwd"></td>
</tr>
<tr>
<td height="30" align="center"><input name="Submit" type="submit" class="btn_grey" value="登录">
<input name="Submit2" type="button" class="btn_grey" value="关闭" onClick="myClose(login)"></td>
</tr>
</table>
</form>
</div>
注意：不要忘记在层中加入使控制层隐藏的按钮（即关闭按钮），在该按钮的onClick事件中调用自定义的JavaScript函数myClose()控制层的隐藏。
（3）编写自定义的JavaScript函数myClose()控制id为notClickDiv的层和id为login的层隐藏。myClose()函数的具体代码如下：
function myClose(divID){
divID.style.display='none'; //设置id为login的层隐藏
document.getElementById("notClickDiv").style.display='none'：
}
//设置id为notClickDiv的层隐藏
（4）通过CSS样式控制用于设置父窗口变灰的<div>标记并黑色半透明效果，具体代码如下：
#notClickDiv{
filter:alpha(Opacity=35);opacity:0.35; /*设置不透明度为35%*/
background:#000000; /*设置背景为黑色*/
position:absolute; /*设置定位方式为绝对位置*/
display:block; /*设置该<div>标记显示*/
z-index:9; /*设置层叠顺序*/
top:0px; /*设置顶边距*/
left:0px; /*设置左边距*/
}
（5）在页面中加入“登录”超链接，该超链接执行的操作是调用自定义JavaScript函数Myopen()显示login层，关键代码如下：
<a href="#"onClick="Myopen(login)">登 录</a>
（6）编写自定义的JavaScript函数Myopen()，用于控制层的居中显示，代码如下：
<script language="javascript">
function Myopen(divID){ //根据传递的参数确定显示的层
var notClickDiv=document.getElementById("notClickDiv"); //获取id为notClickDiv的层
notClickDiv.style.width=document.body.clientWidth; //设置宽度
notClickDiv.style.height=document.body.clientHeight; //设置高度
notClickDiv.style.display='block'; //设置层显示
divID.style.left=(document.body.clientWidth-240)/2; //设置由divID所指定的层的左边距
divID.style.top=(document.body.clientHeight-139)/2; //设置由divID所指定的层的顶边框
divID.style.display='block'; //设置由divID所指定的层显示
}
</script>
举一反三
根据本实例，读者可以：
实现电子邮件系统中的发送电子邮件页面；
实现电子商城中的用户登录页面。