Using Animate.css with Modals and Full calendar

417
June 26, 2017, at 11:20 PM

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

×

CREAR NUEVA RESERVA {{fecha}}
                        <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>
READ ALSO
How to make an element not load in Bootstrap 2 on phone?

How to make an element not load in Bootstrap 2 on phone?

I've got an old website that uses Bootstrap 2On it I've got a picture slider with pics that I want to load on tablet and desktop, but not on phone (too much data to load)

357
Unable to quite center list on bottom in Cordova

Unable to quite center list on bottom in Cordova

I am trying to make a bottom navigation bar in CordovaI created a new app and replaced the www/index

306
Include css/style loaders in webpack react application

Include css/style loaders in webpack react application

I want to include custom css file in my react applicationMy webpack

406