ChinaHost

 找回密码
 用户.注册
查看: 1350|回复: 1

[网站建设] jquery 弹出登录窗口实现代码

[复制链接]
发表于 2012-6-11 09:32:27 | 显示全部楼层 |阅读模式
本帖最后由 123木头人 于 2012-6-11 09:33 编辑

结构定义了两个层,一个为半透明的背景层,一个是弹出层主要结构,都设为浮动position:absolute;背景层遮掉所有body内容很容 易做到。

     主要层左右居中,设置left等于窗口宽除二减去自身层宽除二就居中了,至于窗口上下居中我没做到,固定了top等于滚动条隐去的 scrollTop加上50px;

当事件触发这个类时,首先判断一下两个层是否已经append到body里面,否则每次触发它就一直增加增加了。设置了五个参数title、 content、width、height、cssName,它们分别定义了层标题、层内内容、层宽、层高、层内容的样式名。层内内容又设置了url、 text、id、iframe四种加载方式,通过ajax以get或post加载目标url的html内容,text是直接在事件里写入内容,而id是取 得页面上某个id里面的html显示到弹出层里,iframe都知道是在层里面以框架显示目标url了。往往弹出层里面的内容样式也是各种各样的,所以加 了一个参数cssName,通过它就可以把层内的内容给排好了。
一,弹出层的html如下:
  1. <div id="floatBoxBg">
  2. <div id="floatBox" class="floatBox">
  3. <div class="title"><h4>标题</h4><span>关闭</span></div>
  4. <div class="content">内容</div>
  5. </div>
  6. </div>
复制代码
其对应样式如下:
  1. #floatBoxBg {
  2. display:none;
  3. width:100%;
  4. height:100%;
  5. background:#000;
  6. position:absolute;
  7. top:0;
  8. left:0;
  9. }
  10. .floatBox {
  11. border:#0C7FDA 5px solid;
  12. width:300px;
  13. position:absolute;
  14. top:50px;
  15. left:40%;
  16. z-index:1000;
  17. }
  18. .floatBox .title {
  19. height:23px;
  20. padding:7px 10px 0;
  21. color:#fff;
  22. background-attachment: scroll;
  23. background-image:url(../images/dialog_bg.gif);
  24. background-repeat: repeat-x;
  25. background-position: 0px 0px;
  26. }
  27. .floatBox .title h4 {
  28. float:left;
  29. padding:0;
  30. margin:0;
  31. font-size:14px;
  32. line-height:16px;
  33. }
  34. .floatBox .title span {
  35. float:right;
  36. cursor:pointer;
  37. vertical-align:middle;
  38. margin-bottom:2px;
  39. }
  40. .floatBox .content {
  41. padding:20px 15px;
  42. background:#fff;
  43. }
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?用户.注册

x
发表于 2013-1-25 11:24:39 | 显示全部楼层
顶起顶起顶起
您需要登录后才可以回帖 登录 | 用户.注册

本版积分规则

手机版|小黑屋|

Processed in 0.025060 second(s), 17 queries , Gzip On.

Powered by Comsenz Discuz! platform.

© 2012-2016 中国主机联盟 专业IDC交流平台,提供服务器、VPS云主机、虚拟主机、域名技术交流及优惠信息

快速回复 返回顶部 返回列表