jQuery 实现提示信息或登录提示

本效果出自我司网站:http://www.cecb2b.com/(元器件交易网),若转载请注明出处!

本效果灵活的操作 showloginpop1() 方法,可以实现各种各样的功能,比如:显示提示信息;用户登录等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>元器件交易网提示信息</title> <script src="http://images.cecb2b.com/js/common/jquery_last.js" type="text/javascript"></script> <style type="text/css"> .popheadbg { background: url("http://images.cecb2b.com/images/membercenter/bg_icupload1.gif") repeat-x scroll 0 0 transparent; border:1px solid #D1D1D1; border-width: 1px 0; height: 27px; width: 420px; } .mailreturn { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CAE7FF; padding-bottom: 19px; text-align: left; width: 418px; } .close { float:right; padding-right:10px; cursor:pointer; } .pcon { height:auto; overflow:hidden; text-indent:2em; margin:0 auto; padding:5px 0 20px 0; color:#666666; } .d { width:382px; height:35px; margin:0 auto; overflow:hidden; position:relative; z-index:z-index:4000; background:url(http://images.cecb2b.com/images/zt/px2011/member.gif) no-repeat 0 0;" } .linkSpan { position:absolute; display:block; height:33px; width:186px; text-align:center; line-height:33px; left:0px; top:2px; } .linkSpan2 { position:absolute; display:block; height:33px; width:186px; text-align:center; line-height:33px; left:200px; top:2px; } .linkStyle { color:#0082ff; cursor:pointer; } img { border:0px; } </style> </head> <body οnlοad="showloginpop1();"> <!-- 提示信息开始 --> <div id="loginpop1" style="text-align:center; display:none; z-index:100; position:absolute;"> <div class="popheadbg" id="popheadbg" style="font-size:14px; font-weight:bold; color:#fff; text-align:left; padding-left:15px; width:425px;padding-top:5px;height:22px;border:1px solid #d1d1d1;border-width:1px 0 1px 0;"> <span id="tishi" class="close"><img src="http://images.cecb2b.com/images/membercenter/btn_popwindow_close.gif" height="16" width="16" id="close" /></span>温馨提示 </div> <div class="mailreturn" style="padding:10px; font-size: 12px; line-height: 22px; width:418px;border: 1px solid #cae7ff; height:auto; overflow:hidden;"> <p class="pcon">您好!您目前还不是正式会员,暂不能使用此功能!</p><!--提示信息--> <div class="d"><span class="linkSpan"><a class="linkStyle" οnclick="location='http://www.cecb2b.com/zt/qianjiaxing.shtml'">终端工厂千家行</a></span><span class="linkSpan2"><a target="_top" class="linkStyle" οnclick="location='/member/memberindex.do'">进入会员中心</a></span> </div> <p style="width:418px; margin:0 auto; padding:15px 0 0px 0;">如有疑问请咨询客服热线:<br /> <span style="color:#FF6E02; font-weight:bold;">400-626-5285</span><em style="color:#999; font-style:normal;"> 转 </em><span style="color:#FF6E02; font-weight:bold;">618</span><span style="color:#666;">北京</span><a rel="nofollow" href="http://sighttp.qq.com/cgi-bin/check?sigkey=7aeb593bc346f4d0fd1a53b59430e21abe3445a3b4e20cadd433a144dd24daea" ;="" target="_blank;" οnclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime='+Math.random()+'&sigkey=7aeb593bc346f4d0fd1a53b59430e21abe3445a3b4e20cadd433a144dd24daea';var oldscript=document.getElementById('testJs');var newscript=document.createElement('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;"><img style="vertical-align:middle" width="23" height="16" alt="" src="http://images.cecb2b.com/images/membercenter/qq.gif"></a><span style="color:#666;">深圳</span><a href="tencent://message/?uin=1093581976&Site=www.cecb2b.com&Menu=yes"><img style="vertical-align:middle" width="23" height="16" alt="" src="http://images.cecb2b.com/images/membercenter/qq.gif"></a><span style="color:#666;">西安</span><a rel="nofollow" href="tencent://message/?uin=834638847&Site=www.cecb2b.com&Menu=yes"><img style="vertical-align:middle" width="23" height="16" alt="" src="http://images.cecb2b.com/images/membercenter/qq.gif"></a> </p> </div> </div> <div id="bgloginpop2" style="position:absolute;left:0;top:0;background:#000;opacity: 0.6;-moz-opacity: 0.6;-khtml-opacity: 0.6;filter: alpha(Opacity=60);z-index:99; display:none"></div> <!-- 提示信息结束 --> </body> </html> <script type="text/javascript"> function showloginpop1(){ var browserName=navigator.userAgent.toLowerCase(); $("#bgloginpop2").show() $("#loginpop1").show() $("#bgloginpop2").width($("body").width()) $("#bgloginpop2").height($("body").height()) if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){ $("#loginpop1").css({"top":(document.documentElement.clientHeight-$("#loginpop1").height())/2+document.body.scrollTop,"left":($("body").width()/2-$("#loginpop1").width()/2)+"px"}) } else { $("#loginpop1").css({"top":(document.documentElement.clientHeight-$("#loginpop1").height())/2+document.documentElement.scrollTop,"left":($("body").width()/2-$("#loginpop1").width()/2)+"px"}) } var $offset=$("#loginpop1").offset(); $(".close1").css({"left":$offset.left+400,"top":$offset.top+30}) } $(function(){ $("#close").click(function(){ $("#loginpop1").hide(); $("#bgloginpop2").hide(); }) }) </script>


效果图展示:



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值