底部对话框可拉大

1.css样式

<style>
	#box {
	position: fixed;
	bottom: 0;
	width: 7.5rem;
	background: pink;
	cursor: pointer;
	display: none;
	background: pink;
}
</style>

2.html

<div id="box">
	<img src="http://bd.jgyljt.com/jgswt/img/bdjgAddon/heightLine.png" alt="" style="width:100%;position:relative;top:-12px;" />
	<p class="oneP">你好,我是XXX关于什么问题我帮你解答</p>
	<p class="twoP">我是XXX,请输入您的问题</p>
</div>

3.js效果

<script>
//获取元素
var box = document.getElementById("box");
//绑定事件
box.ontouchstart = function(ev) {
	/*计算手指刚触摸时的y坐标*/
	var top1 = ev.targetTouches[0].clientY;
	/*盒子原来的高度*/
	var firstHei = parseInt(window.getComputedStyle(box).height);
	this.ontouchmove = function(ev) {
		/*计算手指滑动时的y坐标*/
		var top2 = ev.targetTouches[0].clientY
		/*计算滑动了多少距离*/
		var top = (top1 - top2);
		/*盒子动态变高度*/
		if((firstHei + top) > 100)
		{box.style.height = firstHei + top + "px";}
											
		}
}
box.touchend = function() {
	this.ontouchmove = function() {}
}
setTimeout(function() {
	$('#box').show();
}, 3000)
setTimeout(function() {
	$('.oneP').show();
}, 4000)
setTimeout(function() {
	$('.twoP').show();
}, 5000)
</script>