弹出隐藏的HTML表单

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

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

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

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

图7-27 弹出隐藏的表单

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

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

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

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

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

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

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

1. #layer {
2.    display: none;
3.    position: absolute;
4. }

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

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

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

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

1. function showLayer(id, width, height) {
2.     var obj  = document.getElementById(id);
3.     var winWidth = document.documentElement.clientWidth;
4.     var winHeight = document.documentElement.clientHeight;
5.     var offsetTop = document.documentElement.offsetTop;
6.     var left = (winWidth - width)/2;
7.     var top  = (winHeight - height)/2 + offsetTop;
8.     obj.style.top = top + "px";
9.     obj.style.left = left + "px";
10.     obj.style.display = "block";
11. }

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

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

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

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

说明：

本例操作表单的显示和隐藏，都是直接使用Javascript实现的。当然，也可以使用jQuery来实现。无论使用Javascript，还是jQuery，其思想完全相同，只是两种表现形式而已。

更重要的是，如果使用jQuery，代码会更加简洁。并且，jQuery可以很容易获取到表单元素的宽度和高度，showLayer()函数就可以省略两个参数，使用起来更加方便。

1. function showLayer(id) {
2.     var left = ($(window).width() - $(id).width())/2;
3.     var top  = ($(window).height() - $(id).height())/2;
4.     
5. $(id).css({"top": top, "left": left, "display": "block"});
6. }
8. function hideLayer(id) {
9.     $(id).css({"display": "none"});
10. }

需要注意的是，如果使用jQuery实现，设置坐标时，无需再添加 "px"。另外，在调用这两个函数的地方，参数 id 的前面要加一个 '#'（当然，也可以在函数中拼接），它是jQuery中 id 选择器的标识符。如，显示表单的链接就要写成 <a οnclick="showLayer('#layer')"> 登 录 </a>。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。