Using Animate.css with Modals and Full calendar

Im developing an Angular 2 project, animations work fine with transitions and all, but I have a modal in one of my components, which is a full calendar and whenever you click on a date a modal pops up, however, now that I decided to use Animate.css the modal simply shows up with a dark background, and you cant scroll, click or even close it. The only workarround i found is deleting the href containing the animations Any suggestions on how to fix this? I really wanna use animations Here's the full calendar html

<div class="animated wobble"> <angular2-fullcalendar [options]=calendarOptions()>{{options | json}}</angular2-fullcalendar> </div> And Here is the modal

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div id="calendar">
            <button id="botonAuxiliar" type="button" class="btn btn-default"  (click)= getHorarios(1) style="display: none;">Default</button>
            <button id="openModalButton" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" toogle="hide" style="display: none;">Crear Reserva</button>
            <div id="myModal" class="modal fade" role="dialog" [hidden]="!visible" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                <div class="modal-dialog">
                    <div class="loginmodal-container">

×

                        <div class="modal-body">
                            <p>Descripcion</p>
                            <input [(ngModel)]="descripcion" type="text" id="descripcion" class="form-control input-sm chat-input" placeholder="descripcion" style="text-transform:uppercase;"/>
                            <p>Fecha</p>
                            <input [(ngModel)]="fecha" type="text" id="descripcion" #dateControl="ngModel" class="form-control input-sm chat-input" placeholder="AAAA-DD-MM" dateISO/>
                            <p>Aula</p>
                            <select [(ngModel)]="selectedValueA" name="something" class="form-control">
                                <option *ngFor="let classroom of classrooms" [ngValue]="classroom">{{classroom.DESCRIPTION}}</option >
                            </select><br>
                            <button type="button" class="btn btn-info btn-block" (click)= getAllEmptyHours() >Obtener lista de horarios disponibles</button>
                            <p>Hora inicio</p>
                            <select [(ngModel)]="selectedValue" name="something" class="form-control">
                                <option *ngFor="let hora of horas" [ngValue]="hora">{{hora.HORA_INICIO}}</option >
                            </select><br>
                            <p>Periodos para los cuales se desea reservar</p>
                            <select [(ngModel)]="selectedValueP" name="something" class="form-control">
                                <option *ngFor="let periodo of periodos" [ngValue]="periodo">{{periodo}}</option >
                            </select><br>

                            <button *ngIf="collaboratorVisible" type="button" class="btn btn-info btn-block" (click)= getCollaborators() >Obtener lista de colaboradores</button>

                            <p>Materia</p>
                            <select [(ngModel)]="selectedValueM" name="something" class="form-control">
                                <option *ngFor="let materia of materias" [ngValue]="materia">{{materia.MATERIA}}</option >
                            </select><br>

                           <div class="material-switch pull-right">
                                <input [(ngModel)]="collaboratorVisible" name="activo" type="checkbox" id="collaborator">Agregar colaborador(es)
                                <label for="collaborator" class="label-primary"></label>
                            </div>
                            <button *ngIf="collaboratorVisible" type="button" class="btn btn-info btn-block" (click)= getCollaborators() >Obtener lista de colaboradores</button>
                            <p *ngIf="collaboratorVisible">Colaborador(es)</p>
                            <select *ngIf="collaboratorVisible" [(ngModel)]="selectedValueC1" name="something" class="form-control">
                                <option *ngFor="let collaborator of collaborators" [ngValue]="collaborator">{{collaborator.COLLABORATOR}}</option >
                            </select><br>
                            <select *ngIf="collaboratorVisible" [(ngModel)]="selectedValueC2" name="something" class="form-control">
                                <option *ngFor="let collaboratorTwo of collaborators" [ngValue]="collaboratorTwo">{{collaboratorTwo.COLLABORATOR}}</option >
                            </select><br>


                        </div>
                            <div class="btn-toolbar">
                            <button *ngIf="!aceptarV" id="aceptarVisible" type="button" class="btn btn-success btn-block" (click)= nuevaReserva() data-dismiss="modal">Aceptar</button> 
                            <button *ngIf="modEventV" type="button" class="btn btn-info btn-block" (click)= setEvento() data-dismiss="modal">Modificar evento</button>
                            <button *ngIf="!eliminarV" type="button" class="btn btn-danger btn-block" (click)= eliminarEvento() data-dismiss="modal">Eliminar evento</button>
                            <button type="button" class="btn btn-primary btn-block" (click)= cancelarReserva() data-dismiss="modal">Cancelar</button>
                            </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>