jquery仿Discuz右下角悬浮层提示_打开页面右下角滑动显示悬浮层代码



114 453 152



特效描述:右下角悬浮层 打开页面 滑动显示悬浮层,

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/yanue.pop.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/yanue.pop.js"></script>

2. HTML代码

<!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=utf-8" />
<title>jquery右下角pop弹窗 完美兼容ie6789 ff chrome</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* pop */
#pop{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:12px;position:fixed;right:10px;bottom:10px;}
#popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;position:relative;font-size:12px;padding:0 0 0 10px;}
#popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;}
#popHead #popClose{position:absolute;right:10px;top:1px;}
#popHead a#popClose:hover{color:#f00;cursor:pointer;}
#popContent{padding:5px 10px;}
#popTitle a{line-height:24px;font-size:14px;font-family:'微软雅黑';color:#333;font-weight:bold;text-decoration:none;}
#popTitle a:hover{color:#f60;}
#popIntro{text-indent:24px;line-height:160%;margin:5px 0;color:#666;}
#popMore{text-align:right;border-top:1px dotted #ccc;line-height:24px;margin:8px 0 0 0;}
#popMore a{color:#f60;}
#popMore a:hover{color:#f00;}
</style>
</head>
<body style="height:1200px;">
<script type="text/javascript" >
//记得加载jquery
//使用参数:1.标题,2.链接地址,3.内容简介
window.onload=function(){
	var pop=new Pop("这里是标题,哈哈","http://www.dijiuzhanzhang.com/","请输入你的内容简介,这里是内容简介.请输入你的内容简介,这里是内容简介.请输入你的内容简介,这里是内容简介");
}
</script>
<div id="pop" style="display:none;">
	<div id="popHead"> <a id="popClose" title="关闭">关闭</a>
		<h2>温馨提示</h2>
	</div>
	<div id="popContent">
		<dl>
			<dt id="popTitle"><a href="http://www.dijiuzhanzhang.com/" target="_blank">这里是标题</a></dt>
			<dd id="popIntro">这里是内容简介</dd>
		</dl>
		<p id="popMore"><a href="http://www.dijiuzhanzhang.com/" target="_blank">查看 »</a></p>
	</div>
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 浮动提示框 浮动菜单 浮动导航 滑动选项卡 滑动切换 文字提示框 提示文字

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到