<!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>