Bootstrap 3 - modal scroll mobile

Solution for bug the bootstrap 3 when the modal-body is bigger than screen height and dont show correctly. And the mobile devices don't have scroll bars.

by Sergio Andrés Ñustes

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div id="app">
    <h4>Solution for modal-scroll .modal-body in mobile Bootstrap</h4>
    <ul>
        <li>Click and resize screen (height-scroll) for watch the performance</li>
        <li>The mobile browser don't have scroll bars for div, so i make a touch scrollbar implementation</li>
    </ul>
    
    <button class="btn btn-primary" id="button-modal">Click!</button>
    
    <div id="modal-id" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">infinito84</h4>
                </div>
                <div class="modal-body">
                    Mobile devices can to touch for scroll<br/>
                    1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

#app{
    text-align:center;
}
ul{
    text-align:justify;
}

JavaScript

$("#button-modal").click(function(){
    Show("modal-id");
});

//Fix modal mobile Boostrap 3
function Show(id){
	//Fix CSS
	$(".modal-footer").css({"padding":"19px 20px 20px","margin-top":"15px","text-align":"right","border-top":"1px solid #e5e5e5"});
	$(".modal-body").css("overflow-y","auto");
	//Fix .modal-body height
	$('#'+id).on('shown.bs.modal',function(){
		$("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
		h1=$("#"+id+">.modal-dialog").height();
		h2=$(window).height();
		h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
		h4=h2-(h1-h3);		
		if($(window).width()>=768){
			if(h1>h2){
				$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
			}
			$("#"+id+">.modal-dialog").css("margin","30px auto");
			$("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
			$("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);				
			if($("#"+id+">.modal-dialog").height()+30>h2){
				$("#"+id+">.modal-dialog").css("margin-top","0px");
				$("#"+id+">.modal-dialog").css("margin-bottom","0px");
			}
		}
		else{
			//Fix full-screen in mobiles
			$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
			$("#"+id+">.modal-dialog").css("margin",0);
			$("#"+id+">.modal-dialog>.modal-content").css("border",0);
			$("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);	
		}
		//Aply changes on screen resize (example: mobile orientation)
		window.onresize=function(){
			$("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
			h1=$("#"+id+">.modal-dialog").height();
			h2=$(window).height();
			h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
			h4=h2-(h1-h3);
			if($(window).width()>=768){
				if(h1>h2){
					$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
				}
				$("#"+id+">.modal-dialog").css("margin","30px auto");
				$("#"+id+">.modal-dialog>.modal-content").css("border","1px solid...