7.2.4 弹出隐藏的表单

大多数情况下，表单会直接显示在页面上，但并非总是如此。比如，一些购物网站，允许用户把商品加入购物车，当提交订单时，再检测用户是否登录，如果没有登录，则弹出登录界面，供用户登录。

弹出表单的基本原理是，在页面上已经存在一个表单，并通过CSS将其隐藏，当用户点击某个按钮或链接，或满足一定触发条件时，再利用 Javascript 或 jQuery 将表单动态显示出来。当然，不局限于表单，页面上的任何元素，都可以通过这种方式动态显示出来。

这种效果不仅能够充分利用有限的版面空间，而且能够提高用户体验。更重要的是，它并不影响 SEO 效果，因为它实际存在于页面中，只是对用户不可见而已。

本节，我们通过一个具体的实例，来演示一下如何弹出隐藏的表单。假设页面上有一个链接和一个隐藏的用户登录界面，用户点击链接后，会弹出隐藏的界面。效果如图 7‑27 所示：

首先，制作用户登录的界面。它实际上就是一个表单，输入用户名和密码后，方可登录。同时，表单上还提供一个链接，供用户关闭表单。

<form id="layer" action="" method="post">
<div class="title">
<h2>用户登录</h2>
<a onclick="layer.style.display=none"></a>
</div>
<p><label>用户名: </label><input type="input" name="username" /></p>
<p><label>密  码: </label><input type="password" name="password" />
<p><input type="submit" value=" 登 录 " /></p>
</form>

由于在执行显示和隐藏操作时，要通过 id 属性来获得表单对象，因此，需要为 form 元素定义 id 属性。

在HTML代码中，如果在链接的 onclick 处理事件中编写Javascript代码，则可以直接通过 id 来获得一个对象。因此，可以直接通过 id 获得表单对象，再把它的 display 属性值设置为 none，来隐藏表单。

考虑到代码的重用性，也可以编写一个Javascript函数，来隐藏表单。如果使用Javascript函数，就要通过 document.getElementById() 接口来获得一个对象，而不能直接通过 id 获得对象。

function hideLayer(id) {
    var obj = document.getElementById(id);
    obj.style.display = "none";
}

其次，通过CSS的 id 选择器将表单隐藏起来，因为在打开页面时，并不希望它被显示出来。需要注意的是，这个 id 选择器必须与 form 中定义的 id 名称匹配。

#layer {
   display: none;
   position: absolute;
}

如果表单使用绝对定位，在它被显示出来时，就不会影响其他元素，也不会破坏页面布局，因为它已经脱离文档流。绝对定位可以使用 position: absolute，也可以使用 position: fixed。但是，IE6及以下版本不支持固定定位，使用时要小心。

隐藏一个绝对定位的元素，可以使用 display: none，也可以使用 visibility: visible，要根据实际情况，选择合适的方法。

其次，创建Javascript代码，来动态显示表单，它是弹出隐藏表单的核心。为了方便代码重用，需要把弹出表单的操作封装为一个函数。

因为要操作页面元素，必须要知道元素的 id。另外，还希望表单出现在屏幕的中央位置，就需要知道表单的宽度和高度。因此，该函数需要三个参数，第一个参数是表单元素的 id，第二个参数是表单的宽度，第三个参数是表单的高度。

function showLayer(id, width, height) {
    var obj  = document.getElementById(id);
    var winWidth = document.documentElement.clientWidth;
    var winHeight = document.documentElement.clientHeight;
    var offsetTop = document.documentElement.offsetTop;
    var left = (winWidth - width)/2;
    var top  = (winHeight - height)/2 + offsetTop;
    obj.style.top = top + "px";
    obj.style.left = left + "px";
    obj.style.display = "block";
}

需要注意的是，在设置表单元素的 top 坐标时，要把页面滚动的距离计算在内。另外，在Javascript中操作CSS时，CSS的属性值都是字符串。因此，就要写成 obj.style.top = top + "px"，不能省略 "px"。

最后，在页面是创建一个链接，当用户主动点击该链接时，调用Javascript函数，将表单动态显示出来。

<a onclick="showLayer("layer", 300, 400)"> 登 录 </a>

当然，在实际应用中，除了点击链接外，也可以让用户点击按钮，或满足一定触发条件时，自动调用Javascript或jQuery的函数来显示表单。

function showLayer(id) {
    var left = ($(window).width() - $(id).width())/2;
    var top  = ($(window).height() - $(id).height())/2;
    
    $(id).css({"top": top, "left": left, "display": "block"});
}

function hideLayer(id) {
    $(id).css({"display": "none"});
}