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

最新推荐文章于 2023-03-16 17:12:34 发布

ruxingli

最新推荐文章于 2023-03-16 17:12:34 发布

阅读量2.6k

点赞数 1

分类专栏： jQuery 工作笔记文章标签： jquery class scroll function xhtml filter

本文链接：https://blog.csdn.net/liruxing1715/article/details/7105963

版权

jQuery 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

工作笔记

5 篇文章 0 订阅

订阅专栏

本效果出自我司网站：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>