【一】需求如下：
1：注册不新开页面，改成弹出层，
2：新增用户买房欲望调查，
3：用户名自动检索出推荐的用户名，
4：出生日期用户输入改成控件选择。
5：尽力提高用户体验，吸引用户注册。
【二】无图无真相。
1：简化后的页面：
2：浮出文字提示和圆角边框：
3：支持民意调查（异步提交）
4：自动检索推荐用户名（测试数据）
5：数据有效性验证
6：日历
7：支持拖拽
8：滑入显示
9：over
【三】代码分析
1.弹出层的制作，
a.先引用这三个：
复制代码 代码如下:
<script src="https://www.jb51.net/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>
<script src="https://www.jb51.net/jquery-impromptu.3.1.min.js" type="text/javascript" language="javascript"></script>
<link media="all" type="text/css" href="https://www.jb51.net/examples.css" />
b.调用这个方法$.prompt，实现弹出。
2.浮出文字
a.先引用这两个：
复制代码 代码如下:
<link media="all" type="text/css" href="https://www.jb51.net/jquery.tooltip.css" />
<script src="https://www.jb51.net/jquery.tooltip.min.js" type="text/javascript" language="javascript"></script>
b.调用下面代码实现浮出：
代码
复制代码 代码如下:
$("#suggest2").tooltip({bodyHandler: function() {return "用户名必须以字母开头";},showURL: false});
$("#cemail").tooltip({bodyHandler: function() {return "建议使用新浪游戏";},showURL: false});
$("#Text1").tooltip({bodyHandler: function() {return "未成年人请不要注册";},showURL: false});
3.投票
a.先引用下面两个：
复制代码 代码如下:
<script type="text/javascript" src="https://www.jb51.net/jquery.rater.js"></script>
<link type="text/css" href="https://www.jb51.net/rater.css" media="screen" />
b.调用$('#demo2').rater('Handler1.ashx')实现投票
4.自动检索推荐用户名（自动完成）
a.先引用下面两个
复制代码 代码如下:
<script src="https://www.jb51.net/jquery.autocomplete.min.js" type="text/javascript" language="javascript"></script>
<link media="all" type="text/css" href="https://www.jb51.net/jquery.autocomplete.css" />
<script src="https://www.jb51.net/localdata.js" type="text/javascript" language="javascript"></script>
b.调用 $("#suggest2").focus().autocomplete(cities);实现自动检索，（用的是localdata.js里面的本地测试数据）
5.数据校验
a.先引用这 <script src="https://www.jb51.net/jquery.validate.js" type="text/javascript" language="javascript"></script>
再写如下CSS:
复制代码 代码如下:
<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 500px; }
#commentForm label.error, #commentForm input.submit { margin-left: 0px;color: red; }
</style>
(commentForm 为form的ID)
b.调用这个$("#commentForm").validate()实现验证;form里面的class和一些属性配置好，一切验证全自动。
如：邮箱<input />
6.日历
说到这个惭愧啊！开始用的JQuery的日历插件，后来由于其不能置于弹框的上面，所以改用另外一个。
a.先引用这两个
复制代码 代码如下: