我们会遇到这样的页面。
image.png
诸多list列表项。最低端是固定的菜单选项div。
接下来的动作是，点击其中一个选项，弹出一个占满全屏的modal
image.png
这个modal里有header，footer，和你想要编辑的东西
这段话你们可以不看。我在项目中遇到的问题是，占满全屏的modal会随着body第一层滚动（随长长的list滚动）
image.png
那如果我将第二层modal给fixed定位，肯定就不滚了。but，用了fixed，当你的modal中有输入框时：
软键盘弹出，你的输入框死死的在那里纹丝不动，如果是偏页面下面的输入框，那就被盖住了。用户看不到自己输的什么，心塞
用了很多js+css的方法改来改去还要考虑兼容，浏览器。。，恶心到了自己。
好了，请看。
做了一个布局demo，可以完全很舒畅
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.con .main .item{
background: pink;
margin-bottom: 10px;
width:100%;
height:200px;
font-weight: 900;
text-align: center;
padding-top: 20px;
}
.con .main{
position: absolute;
bottom: 50px;
width: 100%;
height: 100%;
background: #eee;
overflow: hidden;
}
.con .footer{
width:100%;
height:50px;
background: green;
position: fixed;
bottom:0;
}
.modal.in{
display: block;
}
.modal{
display: none;
position: absolute;
top:0;
bottom:0;
width:100%;
background: #fff;
}
.con .main .main_itemCon{
overflow: auto;
height: 100%;
}
.modal-item .main h1{
height:100px;
background: #eee;
margin-bottom: 10px;
}
.modal-item .header{
height:40px;
}
.modal-item .footer{
height:50px;
position: fixed;
bottom:0;
width:100%;
}
.modal-item .main{
position: absolute;
width: 100%;
top: 40px;
bottom: 40px;
overflow: hidden;
}
.modal-item .main .main_item{
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="con">
<div class="header">h1</div>
<div class="main">
<div class="main_itemCon">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
</div>
<div class="footer">菜单选项</div>
</div>
<div class="modal">
<div class="modal-item">
<div class="header">
header
</div>
<div class="main">
<div class="main_item">
我是内容
<h1>1111</h1>
<h1>222</h1>
<h1>333</h1>
<h1>444</h1>
<h1>555
<input type="text">
</h1>
</div>
</div>
<div class="footer">提交</div>
</div>
</div>
<script src="../../../static/js/jquery-1.12.4.min.js">
</script>
<script>
$('.con .main .item').click(function () {
console.log('pp');
$('.modal').addClass('in');
});
</script>
</body>
</html>
嗯，直接粘过去看demo吧，废话不多说。聪明的你一定了解了。
网友评论