揭秘CSS(第 1 版)
7.2.4 弹出隐藏的表单
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

表格

表单

垂直布局的表单

水平布局的表单

表单元素的样式

弹出隐藏的表单

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

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

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

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

弹出隐藏的表单
图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的函数来显示表单。

说明:

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

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

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"});
}

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

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验