Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: data-target not triggering modal

jicee13 pro asked 6 years ago


So I'm trying to use one of the pre-defined modal templates available, however the data-target tag doesn't seem to be working for me. I copied and pasted the code just to get an example working for myself. The code is below...perhaps this is something that isn't available in the free version?

<!-- Button trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalConfirmDelete">Launch modal</button>

<!--Modal: modalConfirmDelete-->
<div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
 <!--Content-->
 <div class="modal-content text-center">
 <!--Header-->
 <div class="modal-header d-flex justify-content-center">
 <p class="heading">Are you sure?</p>
 </div>

<!--Body-->
 <div class="modal-body">

<i class="fa fa-times fa-4x animated rotateIn"></i>

</div>

<!--Footer-->
 <div class="modal-footer flex-center">
 <a href="https://mdbootstrap.com/product/material-design-for-bootstrap-pro/" class="btn btn-outline-danger">Yes</a>
 <a type="button" class="btn btn-danger waves-effect" data-dismiss="modal">No</a>
 </div>
 </div>
 <!--/.Content-->
 </div>
 </div>
 <!--Modal: modalConfirmDelete-->

Damian Gemza staff commented 6 years ago

As Ollie Vincent says, please use Angular code example instead of jQuery. Best Regards, Damian

Ollie Vincent pro answered 6 years ago


Hi, Modals should be available to use in the MDB Free - (there will be a premium component button next to them if not). Are you sure you copied the correct code? I tried your code in a Angular project, and sure enough, it didn't work. However, it did work in a JQuery project - which it shouldn't do. I then tested the Angular modal and it seemed to work. Angular modals can be found here: https://mdbootstrap.com/angular/advanced/modals I am guessing you went to https://mdbootstrap.com/javascript/modals/ which is for JQuery Hope that helps :) Thanks    

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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