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 .滿足特定條件時
