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 .满足特定条件时