JQuery提示框(带滚动条)

最新推荐文章于 2020-12-03 23:35:14 发布

J_ijava

最新推荐文章于 2020-12-03 23:35:14 发布

阅读量1.6k

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/J_ijava/article/details/42028979

版权

JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JQuery实现以下需求:

1 .弹出框居window右侧,上下居中显示

2 .弹出框的高度随框内文本长度变化(文本长度变大,弹出框向上,下方向等速拉长)

3 .当弹出框的高度超过window高度的2/3时,弹出框的高度固定为window高度的2/3,弹出框以滚动条的形式显示多出的文本

演示代码:

// HTML+JS+CSS
<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				color: #333;
				font: 0.9em/1.6em Microsoft Yahei;
			}
			.open {
				margin: 35px auto;
				text-align: center;
			}
			.tishi {
				display: none;
				width: 255px;
				background: #0F6;
				position: fixed;
				right: 0px;
				background: url(img/tishi_head.png) no-repeat 0px 0px;
			}
			.tishi_center {
				margin-top: 61px;
				width: 180px;
				padding-left: 29px;
				padding-right: 29px;
				overflow: hidden;
				line-height: 24px;
				font-size: 14px;
				color: #666;
				background: url(img/tishi_center.png) repeat-y;
			}
			.tishi_bottom {
				overflow: hidden;
				width: 233px;
				height: 29px;
				line-height: 24px;
				font-size: 14px;
				color: #666;
				background: url(img/tishi_bottom.png) repeat-y;
			}
		</style>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$('#openPop').on('click', function() {
					place('#right');
					return false;
				});
				$('#closePop').click(function() {
					$('#right').hide();
				});
				//增加数据1
				$('#btn1').on('click', function() {
					$(this).addClass('hover');
					document.getElementById("addword").innerHTML = "<font color='red'>智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC智能ABC</font>";
					var parents = $(this).parents();
					for (var i = 0; i < parents.length; i++) {
						if (parents[i].id == 'right') {
							var popId = parents[i].id;
						}
					}
					place('#' + popId); //增加后再定位
				});
				//定位
				function place(id) {
					var winW = $(window).width();
					var winH = $(window).height();
					$(id).css({
						'display': 'block'
					});
					var popW = $(id).width();
					var popH = $(id).height();
					console.log('弹出框的高度为' + popH);
					var popInnerH = $(id).find('.tishi_center').height();
					var left = winW - popW - 20;
					var top = (winH - popH) / 2;
					$(id).css({
						'left': left + 'px',
						'top': top + 'px'
					});
					if (popInnerH < (winH - 40)) {
						$(id).css({
							'top': top + 'px',
							'height': 'auto'
						});
						console.log('弹出框的内容器高度为' + popInnerH);
						console.log('弹出框的top为' + $(id).css('top'));
					} else if (popInnerH >= (winH - 40)) {
						$(id).css({
							'top': winH / 6 + 'px',
							'height': (winH * 2) / 3 + 'px',
							'overflow': 'auto'
						});
						console.log('高度溢出时弹出框的内容器高度为' + popInnerH);
						console.log('高度溢出时弹出框的top为' + $(id).css('top'));
					}
				}
			});
		</script>
	</head>

	<body>
		<p class="open"><a href="#" id="openPop">打开弹出框</a>
		</p>
		<div id="btn1" align="center" style="color: green;">添加文本(1)</div>
		<div class="tishi" id="right">
			<div id="pzts" class="tishi_center">
				<!-- begin -->
				<div id="addword"></div>
				<!-- end -->
			</div>
			<div class="tishi_bottom"></div>
		</div>
	</body>

</html>

操作步骤,截图:

1. 点击"添加文本(1)",再点击"打开弹出框",效果:

2 .满足特定条件时

J_ijava

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery提示框(带滚动条)

JQuery实现以下需求: 1 .弹出框居window右侧,上下居中显示 2 .弹出框的高度随框内文本长度变化(文本长度变大,弹出框向上,下方向等速拉长) 3 .当弹出框的高度超过window高度的2/3时,弹出框的高度固定为window高度的2/3,弹出框以滚动条的形式显示多出的文本演示代码:// HTML+JS+CSS
复制链接

扫一扫