<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<style type="text/css">
.modal-body .uploadFileList {height:100%;overflow:auto;border:1px solid #ccc;paddign:5px;}
.modal-body .uploadFileShow {border:1px solid #ccc;border-left:none;padding:0;position:relative;height:100%;padding-top:55px;}
.modal-body .uploadFileShow .uploadFileShowTop {padding:10px;border-bottom:1px solid #ccc;position:absolute;top:0;width:100%;}
.uploadFileShow .uploadFileShowTop .btn.btn-primary {margin-right:8px;}
.uploadFileShow .changeShowHeight {cursor: n-resize;height:18px;border:8px solid #fff;border-left:none;border-right:none;width:100%;background-color:#ccc;position:absolute;top:300px;}
.uploadFileShow .uploadFileShowPage {position:relative;height:100%;}
.uploadFileShow .uploadFileShowPage .uploadFileShowMid, .uploadFileShow .uploadFileShowPage .uploadFileShowBot {height:300px;overflow:auto;box-sizing: border-box;}
.uploadFileShow .uploadFileShowPage .uploadFileShowBot {margin-top:18px;}
</style>
</head>
<body>
<div id="example" class="modal fade in" style="display:block">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3 style="margin:0">xxxx</h3>
</div>
<div class="modal-body" style="height:704px;">
<div class="uploadFileList col-md-3"></div>
<div class="uploadFileShow col-md-9">
<div class="uploadFileShowPage">
<div class="uploadFileShowMid"></div>
<div class="changeShowHeight" id="changeShowHeight"></div>
<div class="uploadFileShowBot"></div>
</div>
<div class="uploadFileShowTop">
<button class="btn btn-primary">导入</button>
<button class="btn btn-primary">确定</button>
<button class="btn btn-primary">取消</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var clickY,dragging,topLimit=$('.uploadFileShowPage:eq(0)').offset().top+200,bottomLimit=$('.uploadFileShowPage:eq(0)').offset().top+$('.uploadFileShowPage:eq(0)').height()-201-18,doc=document,changeShowHeight=$('#changeShowHeight');
changeShowHeight.on('mousedown',function(e){
dragging=true;
});
$(doc).mousemove(function(e){
e = e || window.event;
clickY=e.pageY;
if(dragging){
if(clickY<topLimit){
changeShowHeight.css('top','201px');
dragging= false;
}else if(clickY>bottomLimit){
changeShowHeight.css('top',bottomLimit-$('.uploadFileShowPage:eq(0)').offset().top+6+'px');
}else {
changeShowHeight.css('top',clickY-$('.uploadFileShowPage:eq(0)').offset().top+'px');
}
changeShowHeight.prev().height(parseFloat(changeShowHeight.css('top'))).next().next().height($('.uploadFileShow:eq(0)').height()-parseFloat(changeShowHeight.css('top'))-18)
}
}).mouseup(function(e){
dragging=false;
e=e||window.event;
e.preventDefault?e.preventDefault():e.cancalBubble=true;
})
</script>
</body>
</html>
