Modal bostrap no se desplaza

[moscrates]

Hola

cuando cargo el contenido de un modal con ajax, el modal ya no se desplaza (el modal es mayor a la pantalla) con la barra lateral

cuando tratas de desplazarlo se mueve la pagina de fondo pero no el modal

cualquier ayuda se las voy agradecer

Código Javascript:

$("#example1").on("click",".BtnNew", function(){
 
        var Id = $(this).data("id");
        var IdBoda = $(this).data("idboda");
        var IdHotel = $(this).data("idhotel");
        $.ajax({
            url: "AjaxTraerNuevaReserva.php",
            type: "POST",
            dataType: "html",
            data:{IdBoda:IdBoda, IdReserva:Id, IdHotel:IdHotel},
            success: function(e){               
                $("#NewHabitacion").html(e);
                $("#ModalNew").modal("show");
            }        
        });
    });
 

Código HTML:

<div class="modal fade" id="ModalNew" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
          <form id="AjaxInsertNewReserva" action="AjaxInsertNewReserva.php" method="post">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="ti-close"></span>
                </button>
                <h4 class="modal-title">Nueva Habitacion</h4>
            </div>
            <div class="modal-body">
                <div class="box-body" id="NewHabitacion"> </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="submit" class="btn btn-primary">Guardar Cambios</button>
            </div>
          </form>
        </div>
    </div>
</div>