Topic: Modal isn't work well when I use in animated tag

Pitka Guru free asked 6 years ago


Modal isn't work well when I use in animated tag. The modal window is gray and can't show correctly. I'm unable to click on that, it completely breaks. When I delete the animated zoomIn class then works correctly. I would like to use it in animated tag, how can I do that? Is this a bug? (Angular 5) (angular-bootstrap-md@5.2.2) My Code: <div class="animated zoomIn"> <buttontype="button"class="btn btn-primary waves-light" (click)="saveModal.show()"mdbRippleRadius>Mentés</button> <divmdbModal #saveModal="mdb-modal"class="modal fade"id="centralModalSuccess"tabindex="-1"role="dialog"aria-labelledby="myModalLabel" aria-hidden="true"> <divclass="modal-dialog modal-notify modal-info"role="document"> <divclass="modal-content"> <divclass="modal-header"> <pclass="heading lead">Biztosan menteni akarja?</p> <buttontype="button"class="close"data-dismiss="modal"aria-label="Close" (click)="saveModal.hide()"> <spanaria-hidden="true"class="white-text">×</span> </button> </div> <divclass="modal-body"> <divclass="text-center"> <iclass="fa fa-question fa-4x mb-3 animated rotateIn"></i> <p>A régi adatok felülírása után már nem lehet visszaállítani az előző tartalmat!</p> </div> </div> <divclass="modal-footer justify-content-center"> <atype="button"class="btn btn-primary-modal waves-light"mdbRippleRadius>Mentés</a> <atype="button"class="btn btn-outline-secondary-modal"data-dismiss="modal" (click)="saveModal.hide()"mdbRippleRadius>Mégse</a> </div> </div> </div> </div> </div>

Damian Gemza staff commented 6 years ago

Dear Pitka Guru, If you want to animate modal's button, you have to wrap only this button with div.animated.zoomIn not whole modal. Best Regards, Damian

Pitka Guru free commented 6 years ago

Thank You!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags